CSS Flexbox: A Practical Guide to One-Dimensional Layout

CSS Flexbox: A Practical Guide to Predictable One-Dimensional Layouts

Flexbox is a strong layout model for cards, navigation, and form controls—places where a group of items belongs in one row or one column. Its value is not merely “horizontal alignment.” It is a model for distributing space and aligning items along a main axis and a cross axis. In the W3C definition, a box whose computed display is flex or inline-flex is a flex container; its in-flow children become flex items.

Choose the axes before choosing properties

With the default flex-direction: row, the main axis runs across the row, so justify-content controls distribution on that axis. align-items controls the default alignment across it. When flex-direction changes to column, those spatial roles change with it. This centers a child in both directions:

.dialog {
  min-height: 18rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

Rather than memorize a property as “horizontal” or “vertical,” identify the current main axis first. If items should move to another line, declare flex-wrap: wrap; the default is a single line, so an item is not automatically promised a new row on a narrow screen.

flex defines the space-sharing rule

The flex shorthand combines flex-grow, flex-shrink, and flex-basis. A common equal-column pattern looks like this:

.row { display: flex; gap: 1rem; }
.row > * { flex: 1; min-width: 0; }

MDN describes flex: 1 as flex: 1 1 0: items begin from a zero basis and share available space equally. flex: auto, by contrast, is flex: 1 1 auto, so each item begins from its content size or another specified size. The difference is visible as soon as labels have unequal lengths. A card with a long filename or URL can also refuse to shrink because flex items have an automatic minimum tied to their content. Before reaching for overflow: hidden, apply min-width: 0 to the item that is genuinely allowed to shrink, then make a deliberate decision about wrapping, clipping, or ellipsis.

Gaps, alignment, and visual order

Use gap on the container for item spacing instead of scattering margins across children; it avoids special rules for the final item. For a split navigation pattern, margin-left: auto on one item can push it to the end of a row. Be cautious with order and row-reverse: visual order is not a substitute for a meaningful document order for keyboard and assistive-technology users. When sequence matters, make the HTML order correct first and use CSS only for presentation.

align-content is another frequent source of confusion. It distributes flex lines on the cross axis and has no effect in a single-line flex container. To align the items inside one line, use align-items or a specific item’s align-self.

Know where Grid is a better fit

Flexbox excels at one-dimensional distribution: one row or one column at a time. If both rows and columns need strict coordination—as in a product gallery or dashboard matrix—CSS Grid can express the outer structure more directly. Many robust interfaces use both: Grid for page regions, Flexbox for the icon, title, and actions inside a card.

Before writing declarations, decide five things: the main axis, whether wrapping is allowed, each item’s basis, how free space is shared, and the meaningful content order. Once those are explicit, Flexbox becomes a predictable set of rules instead of a collection of lucky tweaks.

Primary source

koen