What's FlexBox?

It is a responsive design layout that distributes elements within their parent container, even if the size of items is unknown or dynamic (hence the term "flex").

CSS Flexbox is a responsive design layout that helps in aligning HTML elements efficiently.

Working on FlexBox

The parent container that holds items is referred to as the flex-container, and the items/ children as the flex-items.
When elements are displayed as flex, they are laid out along two axes: main-axis : The direction along which items are laid. This depends on the flex-direction property. cross-axis: The direction perpendicular to the main axis. This also depends on the flex-direction property.
A flex container's or item's height or width, whichever is the main-axis direction, is the item's main-size.
A flex item's height or width, whichever is the cross-axis direction, is the item's cross-size.
The flex items are laid along the main-axis starting from the main-start towards main-end.
The container has flex lines along the cross axis, and items are laid along these lines from cross-start towards cross-end.

Properties of FlexBox

Let's use the following code to understand various properties of flex layout:

<div class="container">
        <div class="boxpos">One</div>
        <div class="boxpos" >Two</div>
        <div class="boxpos" id="OP">Three</div>
    </div>

Display property:

.container{
    display: flex;
    border: 1px solid black;
    padding: 10px;
}
.boxpos{
    border: 1px solid mediumorchid;
    height: 100px;
    width: 100px;
    padding: 10px;
    margin: 10px ;
}

This property applies flexbox to the container and all the children become flex items. It overrides the default display: block; property on the container. The items are automatically aligned horizontally, making the row the default main axis.
Flex: the parent is displayed as a block-level flexbox container but the children are laid out as flex items.
Inline-flex: container's children are laid out as flex-items and the container as an inline item.

Flex-Direction

This property controls how items are displayed in the container, i.e it defines the main axis.

This property can take the following values:
Row: (default value) items are laid from left to right along the row of the container.
row-reverse: The items are laid horizontally, but the main-start and main-end lines are reversed.
column : The items are laid in a column, from top to bottom.
column-reverse: The items are laid vertically, but the main-start and main-end lines are reversed.

.container{
    display: flex;
    flex-direction: column;
}
.container{
    display: flex;
    flex-direction: column-reverse;
}
.container{
    display: flex;
    flex-direction: row;
}
.container{
    display: flex;
    flex-direction: row-reverse;
}

Flex-Wrap

By default, all flex items are displayed in a single line. This behavior can be changed using the flex-wrap property and items can be wrapped into multiple lines.

The property takes the following values:
nowrap: (default) The items either shrink to fit the container or overflow if unable to shrink.
wrap: The items are wrapped onto multiple lines, from top to bottom, if the container is not large enough to fit all the items.
wrap-reverse : The items are wrapped onto multiple lines, but from bottom to top. The cross-start and cross-end lines are reversed.

.container{
    display: flex;
    border: 1px solid black;
    padding: 10px;
    flex-wrap: wrap;
} 
 .container{
    display: flex;
    flex-wrap: nowrap;
}
.container{
    display: flex;
    flex-wrap: wrap-reverse;
}

Flex Flow

This is a shorthand for flex-direction and flex-wrap properties and defines how items need to be displayed in both the main and cross axes.

The default value for flex-flow is row nowrap .

.container {
  display: flex;
  flex-flow: row wrap;
}

Justify-content

This property distributes flex items along the main axis. It allows to take up any extra space available along the main axis and changes the way content is displayed.

The property takes the following values:
flex-start: (default) Items are aligned and packed to the start of the container along the main axis (main-start line).
flex-end: Items are packed to the end of the container along the main axis (main-end line).
center : Items are packed to the center of the container.
space-between: Items are placed evenly with space between each other. The first item is placed on the main-start line, and the last item is on the main-end line.
space-around: Similar to space-between but has space on either end of main-start and main-end lines as well.
space-evenly : Items are evenly distributed with equal spacing between each other and between the item and edges.

.container {
display: flex;
justify-content: center;
}

.container {
display: flex;
justify-content: space-between;
}

.container {
display: flex;
justify-content: space-evenly;
}

.container {
display: flex;
justify-content: start;
}

.container {
display: flex;
justify-content: end;
}

Flex Box In CSS