Loading lesson path
Formula
The align - items property aligns the flex items vertically (on the cross - axis).This property can have one of the following values: normal (default)
Formula
stretch center flex - start flex - end baselineFormula
The center value aligns the flex items in the middle of the container:.flex - container {display: flex;
height: 200px;
align-items: center;
}Formula
The flex - start value aligns the flex items at the top of the container:.flex - container {display: flex;
height: 200px;
align-items: flex-start;
}Formula
The flex - end value aligns the flex items at the bottom of the container:.flex - container {display: flex;
height: 200px;
align-items: flex-end;
}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;
}Formula
The align - content property aligns 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)
Formula
center flex - start flex - end space - between space - around space - evenlyFormula
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;
}Formula
With space - between, the space between the flex lines are equal:.flex - container {display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
}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:
Example.flex-container {
display: flex;
height: 400px;Formula
justify - content:center;
align-items: center;
}