54. Flex Container Property: align-items (Cross Axis)
align-items controls how flex items are positioned or stretched along the cross axis (perpendicular to the main axis).
If the direction is row, the cross axis is vertical, and align-items controls vertical alignment.
| Value | Description |
|---|---|
stretch (default) | Items stretch to fill the container on the cross axis (respects min-height/max-height). |
flex-start | Items are aligned at the start of the cross axis. |
flex-end | Items are aligned at the end of the cross axis. |
center | Items are centered on the cross axis. |
baseline | Items are aligned based on their baseline (text line). |
Example: Perfect Vertical Centering
This is a classic Flexbox power move: centering an element both horizontally and vertically.
css .centered-parent { display: flex; height: 400px;
/* 1. Center along Main Axis (Horizontal) */ justify-content: center;
/* 2. Center along Cross Axis (Vertical) */ align-items: center; }
Note: align-items: stretch is the default, which is why flex items without a set height often look the same height as their container.