CSS align-items property aligns the flex items along the cross axis(vertical by default) within the flex container.
In the example below, we have used align-items:center;. This means that all the flex items will be aligned at the center of the cross axis. As cross axis is vertical by default. Therefore, all the flex items will be vertically centered within their flex container.
Example:
.flex-container{
display: flex;
align-items: center;
}
The align-items: flex-start; aligns the flex items at the beginning of the cross-axis. As cross-axis is vertical by default. Therefore, all the flex items will be aligned at the top of the flex container. See the example below:
Example:
.flex-container{
display: flex;
align-items: flex-start;
}
The align-items: flex-end; aligns the flex items at the end of the cross-axis. As cross-axis is vertical by default. Therefore, all the flex items will be aligned at the bottom of the flex container. See the example below:
Example:
.flex-container{
display: flex;
align-items: flex-end;
}
The align-items: baseline; aligns the flex items at their baseline. The baseline is a hypothetical horizontal line upon which all the letters sit. So all the flex items will be aligned taking this line as a reference. See the example below:
Example:
.flex-container{
display: flex;
align-items: baseline;
}
The align-items: stretch; stretches all the flex items to the full length of the cross-axis. As cross-axis is vertical by default. Therefore, all the flex items stretch to cover the full height of their flex container. See the example below:
Example:
.flex-container{
display: flex;
align-items: stretch;
}
CSS Syntax
The align-items property has the following syntax:
align-items: flex-start|flex-end|center|baseline|stretch|initial|inherit;
Property Values
The align-items property accepts the following values:
| flex-start | Aligns the flex items at the beginning of the flex container. |
| flex-end | Aligns the flex items at the end of the flex container. |
| center | Aligns the flex items in the center of the flex container. |
| baseline | Aligns the flex items at their baseline. The baseline is a hypothetical line upon which all the letters sit. |
| stretch | This is the default. The flex items stretch along the cross-axis to cover the full height of the flex container. |
| initial | Sets the align-items property to its default value(stretch). |
| inherit | Inherits the align-items property from the parent element. |
General Info
| Default Value | stretch |
| Inherited | No |
| JavaScript Usage | element.style.alignItems = “flex-end” |
