Flexbox Generator

In short Flexbox lays out items along a single axis and distributes the space left over, which is what makes it right for toolbars, button rows, navigation, and centring something. The mental model that unlocks it is that every property belongs to one of two axes: `justify-content` works along the main axis, `align-items` works across it — and `flex-direction: column` swaps which is which, so the same two properties suddenly control the opposite directions. That swap is the source of most flexbox confusion. The shorthand worth learning properly is `flex`, which is three values: grow, shrink and basis. `flex: 1` means grow to fill, shrink if needed, starting from zero — which is why three `flex: 1` children come out equal regardless of their content, while `flex: auto` sizes them by content first and then shares the remainder. If items refuse to shrink below their content, the cause is almost always `min-width: auto`, the default on a flex item, and the fix is `min-width: 0`. Choose flex when the layout is one row or one column; the moment you need rows AND columns to align with each other, that is Grid.