OnlineCBT
Set the main axis and decide whether items wrap
flex-direction chooses the main-axis direction. flex-wrap decides whether items stay on one line or form additional lines. The flex-flow shorthand combines them. Row follows the inline axis, so writing direction matters.
.cards {
display: flex;
flex-flow: row wrap;
gap: 1rem;
}
.card { flex: 1 1 16rem; }
.steps {
display: flex;
flex-direction: column;
gap: 0.75rem;
}The cards attempt a row and wrap as space becomes insufficient. Each item starts from a 16rem basis but can grow or shrink. The steps form a column. In a column, the main axis is vertical in the usual horizontal writing mode, so main-axis alignment properties act differently than in a row.
Wrapping is not a grid
Each flex line distributes its own available space. If the last row has one item, that item may grow across the row even when rows above contain several equal items. Use grid when columns must align across rows.
Reverse direction carefully
row-reverse and column-reverse change visual layout direction without changing the underlying document order. That can create a mismatch between visual reading and keyboard focus. Write the source in the intended logical order and use reversal only when the meaning remains clear.
Column wrapping needs a constraint
A column-wrapping container normally needs a relevant height constraint before items can wrap into additional columns. Merely writing flex-direction:column and flex-wrap:wrap on an unconstrained auto-height box may not produce the extra columns you expect.
Exercises
- Create five cards and compare nowrap with wrap.
- Switch row to column and observe how the axes change.
- Use a narrow viewport and confirm cards do not force horizontal scrolling.
- Tab through controls after applying row-reverse. Explain why the focus sequence may no longer match the visible arrangement.
