As indicated in the preceding section, this constitutes a flex container (illustrated by the blue area) containing three flex items.
The flex container gains flexibility through setting its display property to flex.
Example
| .flex-container { display: flex; } |
The properties of the flex container include:
The flex-direction property determines the direction in which the container intends to arrange the flex items.
Example
The “column” value arranges the flex items vertically, stacking them from top to bottom.
| .flex-container { display: flex; flex-direction: column; } |
Example
The “column-reverse” value arranges the flex items vertically, but in reverse order, stacking them from bottom to top.
| .flex-container { display: flex; flex-direction: column-reverse; } |
Example
The “row” value arranges the flex items horizontally, stacking them from left to right.
| .flex-container { display: flex; flex-direction: row; } |
Example
The “row-reverse” value arranges the flex items horizontally, but in reverse order, stacking them from right to left.
| .flex-container { display: flex; flex-direction: row-reverse; } |
The flex-wrap property determines whether the flex items should wrap onto multiple lines or not.
The following examples feature 12 flex items, providing a clearer illustration of the flex-wrap property.
Example
The “wrap” value indicates that the flex items will wrap onto additional lines if needed.
| .flex-container { display: flex; flex-wrap: wrap; } |
Example
The “nowrap” value specifies that the flex items will remain on a single line without wrapping (this is the default behavior).
| .flex-container { display: flex; flex-wrap: nowrap; } |
Example
The “wrap-reverse” value specifies that the flexible items will wrap onto multiple lines if required, but in reverse order.
| .flex-container { display: flex; flex-wrap: wrap-reverse; } |
The flex-flow property serves as a shorthand for defining both the flex-direction and flex-wrap properties simultaneously.
Example
|
.flex-container { |
The justify-content property aligns the flex items within the flex container.
Example
The “center” value positions the flex items at the center of the container.
| .flex-container { display: flex; justify-content: center; } |
Example
The “flex-start” value aligns the flex items at the start of the container (this is the default behavior).
| .flex-container { display: flex; justify-content: flex-start; } |
Example
The “flex-end” value positions the flex items at the end of the container.
| .flex-container { display: flex; justify-content: flex-end; } |
Example
The “space-around” value distributes the flex items with space positioned before, between, and after the lines.
| .flex-container { display: flex; justify-content: space-around; } |
Example
The “space-between” value positions the flex items with space allocated solely between the lines.
| .flex-container { display: flex; justify-content: space-between; } |
The align-items property aligns the flex items within the flex container.
In these examples, we employ a container with a height of 200 pixels to provide a clearer illustration of the align-items property.
Example
The “center” value positions the flex items at the center of the container.
| .flex-container { display: flex; height: 200px; align-items: center; } |
Example
The “flex-start” value aligns the flex items at the top of the container.
| .flex-container { display: flex; height: 200px; align-items: flex-start; } |
Example
The “flex-end” value positions the flex items at the bottom of the container.
| .flex-container { display: flex; height: 200px; align-items: flex-end; } |
Example
The “stretch” value extends the flex items to occupy the entire container (this is the default behavior).
| .flex-container { display: flex; height: 200px; align-items: stretch; } |
Example
The “baseline” value aligns the flex items so that their baselines are aligned.
|
.flex-container { |
Note: In the example, various font sizes are utilized to illustrate that the items are aligned based on the text baseline.
The align-content property is used to align the flex lines.
In these examples, we utilize a container with a height of 600 pixels and the flex-wrap property set to wrap to provide a clearer demonstration of the align-content property.
Example
The “space-between” value positions the flex lines with uniform space distributed between them.
|
.flex-container { |
Example
The “space-around” value distributes space both before, between, and after the flex lines.
| .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: space-around; } |
Example
The “stretch” value extends the flex lines to occupy any remaining space (this is the default behavior).
| .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: stretch; } |
Example
The “center” value positions the flex lines at the center of the container.
| .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: center; } |
Example
The “flex-start” value aligns the flex lines at the beginning of the container.
| .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: flex-start; } |
Example
The “flex-end” value positions the flex lines at the end of the container.
|
.flex-container { |
In the forthcoming example, we will address a highly common styling challenge: achieving precise centering.
SOLUTION: By setting both the justify-content and align-items properties to center, the flex item will achieve perfect centering.
Example
| .flex-container { display: flex; height: 300px; justify-content: center; align-items: center; } |
