Align items controls how flex items are aligned along the cross axis of a flex container.
If flex direction is row, align items works vertically.
If flex direction is column, align items works horizontally.
This property is very important for centering content and building clean UI layouts.
Flex-start aligns items to the top of the container when direction is row.
This is the default behavior and keeps items at the beginning of the cross axis.
Center aligns all items in the middle of the container.
This is commonly used to vertically center buttons, icons, and text blocks.
This example shows how align-items center is used to align avatars and text in profile cards.
Without align-items, elements may look misaligned vertically.
Common align-items values
- flex-start aligns items at the start
- center aligns items in the middle
- flex-end aligns items at the end
- stretch stretches items to fill the container height
- baseline aligns items based on text baseline
Stretch makes all items match the height of the tallest item.
This helps create equal-height columns without extra CSS.
Practice task
Create a flex container and:
- Try align-items flex-start
- Change it to center
- Then try stretch
- Observe how vertical alignment changes
Next lesson
In the next page, you will learn about flex-wrap and how to move items to the next line when space is limited.