CSS Flexbox Align
This page covers align-items, align-content, and true centering with Flexbox.
CSS align-items Property
The align-items property is used to align
the flex items vertically (on the cross-axis).
This property can have one of the following values:
normal(default)stretchcenterflex-startflex-endbaseline
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:
CSS align-content Property
The align-content property is used to align
the flex lines. It only has effect when flex items wrap onto multiple lines.
This property can have one of the following values:
stretch(default)centerflex-startflex-endspace-betweenspace-aroundspace-evenly
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 space-between, the space between the flex lines are
equal:
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
}
Result:
True Centering
The following example shows how to solve a common style problem: true centering.
To achieve 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;
}
