How to use it
- Pick a preset (perfect centering, navbar, card grid, sidebar, sticky footer), or start from the defaults.
- Set flex-direction, flex-wrap, justify-content, align-items and gap.
- Click an item and set its flex-grow, flex-shrink, flex-basis, order and align-self.
- Drag the box's corner to test other widths, then copy the code.
The two axes
Flexbox lays things out along a main axis: horizontal by default (row), vertical for column.
justify-contentdistributes items along the main axis (start, center, end, even spacing).align-itemsaligns them on the cross axis (top, center, bottom, stretch).align-contentonly matters when wrapping (flex-wrap: wrap): it aligns the lines against each other.
The classic mix-up: in a column, the two swap roles, so justify-content aligns vertically.
grow, shrink and basis in brief
| Property | What it does | Typical value |
|---|---|---|
| flex-grow | how much of the leftover space it takes | 1 for a “fill” item |
| flex-shrink | how much it may shrink | 0 for a sidebar |
| flex-basis | starting size before growing | 200px, 30%, auto |
The card grid preset uses flex-wrap: wrap with flex: 1 1 140px: cards are at least 140px wide and fill each row. For a strict grid, the CSS grid generator is the better fit.
Tailwind output
Container classes (flex flex-col justify-between items-center gap-[12px]) and per-item classes (grow, shrink-0, basis-[140px], self-end) are listed on separate lines. Defaults are left out, so the code stays short.
Frequently asked questions
How do I center something with flexbox?
On the container: display: flex; justify-content: center; align-items: center. That's the “Perfect centering” preset.
What's the difference between justify-content and align-items?
justify-content works on the main axis, align-items on the cross axis.
Flexbox or grid?
Flexbox for one row or column, grid for two-dimensional layouts.
What does flex: 1 mean?
flex-grow: 1, flex-shrink: 1, flex-basis: 0%: the item shares space equally with its siblings.