In this section, we will learn what the flex align-items property is and how to use it in CSS.

Click here to run the first example.

Click here to run the second example.

CSS flex align-items Property Definition and Usage

By default, if we don’t set the height of flex-items, they will stretch along Cross-Axis of the Flex-container and fill the entire space of their flex-line.

But CSS provided a property named `align-items` by which we can control the positioning of flex-items altogether along Cross-Axis of their container.

CSS flex align-items Property Syntax

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

CSS flex align-items Property Value

The values we can set for `align-items` property are:

• flex-start: using this value, flex-items will be positioned as close as their flex-line allows, to the start-point of the container’s Cross Axis.
• flex-end: using this value, flex-items will be positioned as close as their flex-line allows for the end-point of the container’s Cross Axis.
• center: using this value, flex-items will be positioned on the center of their flex-line.

• baseline: using this value, flex-items will be positioned in a way that their baseline aligns with each other.

Note: flex-items within each flex-line have their own baseline.

• stretch: using this value, it makes flex-items to stretch along Cross-Axis of the container until they fill the entire space of their flex-line. This is the default value.

Example: flexbox align items

See the Pen flexbox align items by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: align items center

See the Pen align items center by Enjoy Tutorials (@enjoytutorials) on CodePen.