OnlineCBT
Arrange a row or column of related items
Flexbox is a one-dimensional layout system. A flex container arranges its direct flex items along a main axis and aligns them on a cross axis. It can wrap, but each line resolves its own layout rather than sharing a full two-dimensional track system.
.toolbar {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
}
.toolbar__title { margin: 0; }
.toolbar__action { margin-left: auto; }The heading, span and button become flex items because they are direct children. The button's auto margin consumes available space before it, pushing it toward the row's end in this left-to-right example. Grandchildren do not become flex items of .toolbar automatically.
Separate container and item properties
display, flex-direction, flex-wrap, gap and alignment describe the container. flex-grow, flex-shrink, flex-basis and align-self describe individual items. Applying justify-content to an item does not position that item within its parent unless it also happens to be a container for its own children.
Intrinsic minimum sizes
A flex item with long content may resist shrinking because of its automatic minimum size. For a text region intended to truncate or wrap inside the available space, min-width:0 can be necessary. Avoid hiding overflow on the whole page as a substitute for finding the oversized child.
Practice
- Build the toolbar and inspect its direct children.
- Wrap the span in another div and identify which box is now the flex item.
- Narrow the viewport and decide whether the toolbar should wrap or become a column.
- Keep the HTML order logical for keyboard and screen-reader users; visual reordering does not rewrite document order.
