CSS Flexbox Generator
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;The CSS flexbox generator sets the five container properties that do most of the work (flex-direction, justify-content, align-items, flex-wrap and gap) and previews them on three items of different heights. The differing heights matter, because align-items has no visible effect when every item is the same size.
How it works
Flexbox has a main axis and a cross axis, and which is which depends entirely on flex-direction. This is the single fact that makes the rest of flexbox make sense.
- With flex-direction: row, the main axis runs horizontally. justify-content moves items left and right; align-items moves them up and down.
- With flex-direction: column, the axes swap. justify-content now controls vertical position and align-items controls horizontal.
- justify-content always acts on the main axis; align-items always acts on the cross axis. Neither is tied to a screen direction.
- align-items: stretch is the default, which is why equal-height columns happen without being asked for.
Examples
Centring in both directions
flex-direction
row
justify-content
center
align-items
center
Result
display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 8px;
With a row direction, justify-content centres horizontally and align-items centres vertically. Switching to column swaps which property does which.
Spread apart with wrapping
justify-content
space-between
flex-wrap
wrap
gap
16px
Result
display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; flex-wrap: wrap; gap: 16px;
space-between pushes the first and last items to the edges and distributes the remaining space between them. With wrap enabled, gap applies between rows as well as between items.
Frequently asked questions
Why does align-items do nothing on my flex container?
Almost always because the items are already filling the cross axis. The default is stretch, so equal-height items show no difference when you change it. Give the container a fixed height, or items of differing heights, and the effect appears.
What is the difference between justify-content and align-items?
justify-content works along the main axis and align-items along the cross axis. Which of those is horizontal depends on flex-direction, in a column layout, justify-content controls vertical placement.
Does gap work in flexbox, or is it grid-only?
It works in both, and has for several years across all current browsers. Before that, flex gaps needed negative margins on the container. gap also applies between wrapped rows, which margins on items never handled cleanly.
When should I use flexbox rather than grid?
Flexbox for one dimension, a row of buttons, a navigation bar, a card footer. Grid for two dimensions at once, where rows and columns both need to line up. Content-sized items that should distribute along a line are the flexbox case.