Align elements of a line
align-items
This property specifies the alignment of elements within a flexbox container on a row-by-row basis.
Property values
This property is used to specify one aspect of an element that serves as a flexbox container.
For flexbox containers with flex-direction:column, this property aligns the elements within each row of the flexbox. Each element in the row is aligned with its peers in that row.
For flexbox containers with flex-direction:row, this property aligns the elements within each column of the flexbox. Each element in the column is aligned with its peers in that column.
Use one of these keywords to align the box area of the items:
| flex-start | The top [left] of the items within a row [column] are aligned |
| flex-end | The bottom [right] of the items within a row [column] are aligned |
| center | The items are aligned along the middle of their height [width] |
| baseline | Each element's typographic baseline (of it's first line of text) is used for alignment |
| stretch | Each item's height [width] is stretched to match its peers |
Examples
display: flex;
align-items: center;