# Align Items

The items can change their size to fit the space:

<figure><img src="https://2650739216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnVmamp3TnQON29mRg6Hg%2Fuploads%2FenQdkB0jUjH1KG4H9Vvj%2Fflexbox%20settings%20-%20align%20items.png?alt=media&#x26;token=a0c457bc-5900-4ffc-9831-575e7fff339e" alt=""><figcaption></figcaption></figure>

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](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#try_it)&#x20;