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.
CSS justify-content Property
The justify-content property is used to
align the flex items when they do not use all available space on the main-axis (horizontally).
This property can have one of the following values:
centerflex-start(default)flex-endspace-aroundspace-betweenspace-evenly
Example
The center value aligns the flex items in the center of the container:
.flex-container {
display: flex;
justify-content: center;
}
Result:
Example
The flex-start value aligns the flex items at the beginning of the container
(this is default):
.flex-container {
display: flex;
justify-content: flex-start;
}
Result:
Example
The flex-end value aligns the flex items at the end of the container:
.flex-container {
display: flex;
justify-content: flex-end;
}
Result:
Example
The space-around value displays the flex items with space
around them:
.flex-container {
display: flex;
justify-content: space-around;
}
Result:
Example
The space-between value displays the flex items with space between them:
.flex-container {
display: flex;
justify-content: space-between;
}
Result:
Example
The space-evenly value displays the flex items with equal space around them:
.flex-container {
display: flex;
justify-content: space-evenly;
}
Result:
CSS align-items Property
The align-items property is used to
align the flex items when they do not use all available space on
the cross-axis (vertically).
This property can have one of the following values:
centerflex-startflex-endstretchbaselinenormal(default)
In the following examples we use a 200 pixels high container, to better demonstrate the
align-items property.
Example
The center value aligns the flex items in the middle of the container:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Result:
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;
}
Result:
Example
The flex-end value aligns the flex items at the bottom of the container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Result:
Example
The stretch value stretches the flex items to fill the container
(this is equal to "normal" which is default):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Result:
Example
The baseline value aligns the flex items
at the baseline of the container:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Note: The example uses different font-size to demonstrate that the flex items gets aligned by the text baseline:
1
2
3
CSS align-content Property
The align-content property is
similar to align-items, but instead of aligning
the flex items, it aligns the flex lines.
This property can have one of the following values:
centerstretch(default)flex-startflex-endspace-aroundspace-betweenspace-evenly
In the following examples we use a 400 pixels high container, with the
flex-wrap property set to wrap, to better demonstrate the
align-content property.
Example
With center, the flex lines are packed toward the center of the container:
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: center;
}
Result:
Example
With stretch, the flex lines stretch to take
up the remaining space of the container (this is default):
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: stretch;
}
Result:
Example
With flex-start, the flex lines are packed
toward the start of the container:
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: flex-start;
}
Result:
Example
With flex-end, the flex lines are packed
toward the end of the container:
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: flex-end;
}
Result:
Example
With space-between, the space between the flex lines are
equal, but the first item is flush with the start edge of the container, and the
last item is flush with the end edge of the container:
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
}
Result:
Example
With space-around, the space between the flex lines are
equal, but the space before the first item and after the last item is set to
half of the space between the flex lines:
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-around;
}
Result:
Example
With space-evenly, the flex lines are evenly distributed in the flex container, with equal space
on top, bottom and between:
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-evenly;
}
Result:
True Centering
The following example shows how to solve a common style problem: true centering.
To achive true centering, set both the justify-content and the align-items properties to
center for the flex container, and the flex item will be perfectly centered
both horizontally and vertically:
flex item
Example
.flex-container {
display: flex;
height: 400px;
justify-content:
center;
align-items: center;
}
The CSS Flex Container Properties
The following table lists all the CSS Flex Container properties:
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the display behavior (the type of rendering box) for an element |
| flex-direction | Specifies the direction of the flex items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |
