A flex container has two directions to think about. The main axis is where items run; the cross axis is the direction across them, like the height of a horizontal row or the width of a vertical column. section 12.2
Find the cross axis in two small steps:
- Set the main direction with flex-direction. A row runs horizontally, so its cross axis runs vertically. section 12.2
- A column runs vertically, so its cross axis runs horizontally. section 12.2
- Use align-items to choose how flex items line up across that cross axis. section 12.2
container {
display: flex;
align-items: stretch|flex-start|flex-end|center|baseline;
}
This rule offers cross-axis alignment choices such as stretching, starting, ending, centering, or lining up baselines. section 12.2
A row of items
With flex-direction: row, items travel left to right on the main axis. Centering them with align-items: center moves them across the vertical cross axis. section 12.2
