CSS Flex Container
CSS Flex Container Properties
The flex container element can have the following properties:
display- Must be set toflexorinline-flexflex-direction- Sets the display-direction of flex itemsflex-wrap- Specifies whether the flex items should wrap or notflex-flow- Shorthand property forflex-directionandflex-wrapjustify-content- Aligns the flex items when they do not use all available space on the main-axis (horizontally)align-items- Aligns the flex items when they do not use all available space on the cross-axis (vertically)align-content- Aligns the flex lines when there is extra space in the cross axis and flex items wrap
CSS flex-direction Property
The flex-direction property specifies the display-direction of flex items in the flex container.
This property can have one of the following values:
row(default)columnrow-reversecolumn-reverse
Example
The row value is the default value, and it
displays the flex items horizontally (from left to right):
.flex-container {
display: flex;
flex-direction: row;
}
Result:
Example
The column value displays the flex items vertically (from top to bottom):
.flex-container {
display: flex;
flex-direction: column;
}
Result:
Example
The row-reverse value displays the flex items horizontally (but from right to left):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Result:
Example
The column-reverse value displays the flex items vertically (but from bottom to top):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Result:
CSS flex-wrap Property
The flex-wrap property specifies whether the flex items should wrap or not,
if there is not enough room for them on one flex line.
This property can have one of the following values:
nowrap(default)wrapwrap-reverse
Example
The nowrap value specifies that the flex items will not wrap (this
is default):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Result:
Example
The wrap value specifies that the flex items will wrap if necessary:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Result:
Example
The wrap-reverse value specifies that the flex items will wrap
if necessary, in reverse order:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Result:
CSS flex-flow Property
The flex-flow property is a shorthand property for setting both the
flex-direction and
flex-wrap properties.
Flex Container Subpages
Continue learning about flex container properties:
- justify-content - horizontal alignment of flex items
- align-items & align-content - vertical alignment and true centering
