CSS flexbox is a one-dimensional layout pattern that makes it easy to design flexible and effective layouts. The use of flexbox ensures that elements are properly placed and are predictable. Flex items are positioned inside a flex container along a flex line. By default, there is only one flex line per flex container.
Let’s get ourselves familiar with the basic terminology that is common in flexbox.
<ul>
<li>main-axis: The main-axis is the primary axis of the flex container along which flex items are aligned.
</li>
<li>main-start | main-end: The flex items are placed or set inside the container beginning with main-start and going up to main-end.
</li>
<li>cross-axis: Cross-axis is referred to as the axis perpendicular to the main axis, and its direction depends on the main axis direction.
</li>
<li>The justify-content property is used to define the alignment along the main axis. 
</li>
<li>The align-items property defines the default behavior for how items are laid out along the cross axis (perpendicular to the main axis).
</li>
<li>The flex-grow property specifies the extent to which the item will grow relative to the rest of the flexible items inside the same container.
</li>
<li>The flex-basis property sets the initial main size of a flex item.
</li>
<li>The flex-shrink property defines how much a flexbox item should shrink if there's not enough space available
</li>
</ul>

CSS flexbox is a one-dimensional layout pattern that makes it easy to design flexible and effective layouts. The use of flexbox ensures that elements are properly placed and are predictable. Flex items are positioned inside a flex container along a flex line. By default, there is only one flex line per flex container.

Let’s get ourselves familiar with the basic terminology that is common in flexbox.

* main-axis: The main-axis is the primary axis of the flex container along which flex items are aligned.
    
* main-start | main-end: The flex items are placed or set inside the container beginning with main-start and going up to main-end.
    
* cross-axis: Cross-axis is referred to as the axis perpendicular to the main axis, and its direction depends on the main axis direction.
    
* The justify-content property is used to define the alignment along the main axis.  
    
* The align-items property defines the default behavior for how items are laid out along the cross axis (perpendicular to the main axis).
    
* The flex-grow property specifies the extent to which the item will grow relative to the rest of the flexible items inside the same container.
    
* The flex-basis property sets the initial main size of a flex item.
    
* The flex-shrink property defines how much a flexbox item should shrink if there's not enough space available

Flex box