Align Items

The items can change their size to fit the space:

Dropdown options:

- Stretch: If the items are smaller than the alignment container, auto-sized items will be equally enlarged to fill the container, respecting the items' width and height limits.

- Flex-start: Used in flex layout only, aligns the flex items flush against the flex container's main-start or cross-start side.

- Center: The flex items' margin boxes are centered within the line on the cross-axis. If the cross-size of an item is larger than the flex container, it will overflow equally in both directions.

- Flex-end: Used in flex layout only, aligns the flex items flush against the flex container's main-end or cross-end side.

- Baseline: All flex items are aligned such that their flex container baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.

Try a demo

Last updated