How to use the flexbox playground
- Change the container properties on the left: direction, wrapping, justify-content, align-items, align-content and gap.
- Watch the boxes move in the preview. Add or remove items, toggle varied sizes, and make the first item grow to fill the space.
- Drag the corner of the preview to resize it and see how wrapping behaves on narrower screens.
- Copy the CSS. Only properties that differ from the defaults are included, so the code stays short.
Flexbox in a nutshell
Flexbox lays items out along one axis. flex-direction sets the main axis (row is horizontal, column vertical). justify-content distributes items along the main axis: packed at the start, centred, or spread out with space-between, space-around or space-evenly. align-items positions items on the cross axis, and align-content spaces whole lines when items wrap onto several rows. gap sets the space between items without margins.
The classic way to centre anything is display: flex; justify-content: center; align-items: center;. For a navigation bar with a logo on the left and links on the right, use justify-content: space-between. To let one item take the remaining space, such as a search box, give it flex: 1. Remember that with flex-direction: column the axes swap, so justify-content becomes vertical.
The playground runs in your browser and remembers your settings.
What is the difference between justify-content and align-items?
justify-content works along the main axis (horizontal in a row); align-items works across it (vertical in a row).
Why doesn't align-content do anything?
It only affects containers with more than one line, so set flex-wrap: wrap and add enough items to wrap.
Should I use flexbox or grid?
Flexbox for one-dimensional rows or columns, Grid for two-dimensional layouts with rows and columns together.