OnlineCBT
Align against the correct axis
justify-content distributes free space along the main axis. align-items sets the default alignment of items along the cross axis. The meaning of horizontal and vertical therefore depends on flex-direction and writing mode.
.row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
min-height: 6rem;
}
.column {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
min-height: 16rem;
}In the usual horizontal writing mode, .row distributes remaining horizontal space and centres items vertically. .column centres the group vertically and aligns it toward the cross-axis start. A visible free-space area is necessary for justify-content to have an observable distributing effect.
Common values
flex-start and flex-end pack items at an axis edge. center packs them centrally. space-between places free space between items; space-around includes space around them, with different edge spacing. gap provides an explicit minimum separation and is not the same as distributing all leftover space.
Stretch and baselines
align-items:stretch can stretch auto-sized items across the line's cross size. An explicit cross-size may prevent that effect. baseline aligns text baselines, useful for controls with different font sizes. align-content distributes multiple flex lines in the cross axis when extra space exists; it is not a replacement for align-items on a single line.
Debug checklist
- Confirm the parent really has display:flex.
- Identify its main axis from flex-direction.
- Check whether free space exists or items already fill the axis.
- Inspect auto margins and explicit sizes that can absorb space or override stretching.
Practice
Place a heading, label and button in a row. Compare center and baseline alignment. Then change the container to a column without changing justify-content and explain why its visible direction changes.
