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;
align-items

style > flexbox > align-itemsAlign elements of a line

🔎