Flexbox lays a set of items out along a single line and lets their own sizes drive the result. The container does not say how wide anything is; it says which direction to flow and how to distribute whatever space is left over. That is why it is the right tool when you do not know in advance how many items there will be, or how big each one needs to be: a navigation bar with a variable number of links, a row of tags, a toolbar whose buttons size themselves from their labels, two buttons pushed to opposite ends of a card footer.
The generator's starting state produces exactly this:
.flex-container { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 12px; }
Everything in flexbox is defined relative to two perpendicular axes, and the single most confusing thing about the module is that the two alignment keywords swap physical meaning when you change flex-direction.
row makes it horizontal and left-to-right; column makes it vertical and top-to-bottom; the two -reverse values flip the flow direction along the same axis.justify-content distributes items along the main axis.align-items positions each item on the cross axis.So in a row, justify-content moves things left and right and align-items moves them up and down. Switch to a column and the two swap over entirely, with no renaming. When a flexbox layout is behaving inexplicably, the first question to ask is which axis you are actually working on.
| Property | Values offered | Effect |
|---|---|---|
flex-direction | row, column, and their reversed forms | Sets which axis is the main one and which way it points. |
justify-content | flex-start, center, flex-end, space-between, space-around, space-evenly | Packs items at one end or spreads the leftover space between them. Note that space-around gives each item equal space on both sides, so the outer gaps are half the inner ones, whereas space-evenly makes every gap identical including the ends. |
align-items | stretch, flex-start, center, flex-end, baseline | Cross-axis position per item. stretch is the default and makes items fill the container's cross size; baseline lines up the first line of text in each item, which is what you want when a row mixes font sizes. |
flex-wrap | nowrap, wrap | Whether items may break onto additional lines when they run out of room. |
align-content | stretch, flex-start, center, flex-end, space-between, space-around | Distributes the wrapped lines themselves on the cross axis. |
gap | 0 to 80 px | Space between items and between wrapped lines. |
That last control is conditional on purpose. align-content only has an effect on a container that has wrapped onto multiple lines. With flex-wrap: nowrap the property is ignored entirely, which is why the generator hides it until you choose wrap — and why setting it on a single-line container is such a common dead end.
There is also a visibility trap with justify-content: if the items already fill the line, there is no leftover space to distribute, so changing the value changes nothing on screen. The preview gives each box a fixed 64px width precisely so that free space exists and the buttons have a visible effect.
Notice that the output contains container rules only. The items' own flexibility — flex-grow, flex-shrink and flex-basis, usually written together as flex: 1 — is not emitted, because the preview boxes have explicit sizes instead. The moment you want one child to absorb the leftover space rather than just sit in it, that is the declaration you add:
.flex-container > .search { flex: 1; }
With justify-content: flex-start that turns a logo, a search field and a button into the classic header bar, where the search field expands to fill everything the other two do not use.
min-width: 0 on the offending item, plus overflow: hidden or text truncation if you actually want it to clip. In a column the equivalent property is min-height: 0, which is also what you need before a scrolling child inside a flex column will scroll at all.stretch does nothing if the item has an explicit cross size. A child with its own height cannot be stretched vertically in a row.row-reverse and column-reverse change the visual order without changing the document order, so tab focus and screen-reader reading order no longer match what is on screen. The same applies to the order property. Keep the markup in a sensible sequence and use reversal only for cosmetic tweaks.gap is not a margin. It never appears at the outer edges and it never collapses, which is usually an advantage, but it also means you cannot use it to push an element away from the container edge.Reach for it when the layout is a single sequence and the content should decide the sizes: navigation bars, button groups, breadcrumb trails, media objects with an avatar beside text, form rows, vertically centring one item, distributing an unknown number of cards along one line, or pushing a footer to the bottom of a short page. Reach for grid instead when columns and rows both matter and tracks must line up with each other.
Because there is no free space left on the main axis. Either the items already fill the line, or one of them has grown to absorb everything. Check the items' widths and any flex: 1 first.
It applies only to multi-line containers. Set flex-wrap: wrap and make sure the items actually overflow the line; otherwise align-items is the property you are looking for.
display: flex; justify-content: center; align-items: center; on the parent centres the child on both axes, and it works without knowing the child's size. That is the generator's default state.
Yes. Space between flex items via gap is supported in all current browsers, including in the row and column directions.
No. For a one-dimensional sequence, flexbox now covers every case those techniques handled, with fewer side effects and no clearing hacks.