CSS Flexbox Playground

Flexbox is easier to learn by poking at it. Change direction, wrap, justify-content, align-items, gap and the number of boxes, and watch them rearrange in real time. When you've got the layout you want, copy the CSS for the container.

How to use it

1. Pick a direction and wrap setting.
2. Change justify-content and align-items.
3. Set the gap and the number of items.
4. Copy the CSS.

When it helps

• Learning flexbox.
• Finding the right alignment for a layout.
• Seeing how items wrap.
• Prototyping a nav bar or a row of cards.

Good to know

• Justify-content works along the main axis; align-items works across it.
• The main axis flips when you switch between row and column.
• Gap is cleaner than margins for spacing between items.

The two axes

Flexbox lays items along a main axis, set by flex-direction, and aligns them across a cross axis. Justify-content distributes space along the main axis, while align-items positions items across it. Switching from row to column swaps the axes, which is why the same properties seem to behave differently.

Wrap lets items flow onto new lines, and gap sets space between them.

Worked example: a navigation bar

For a horizontal nav with the logo on the left and links on the right, use display flex with space-between and align-items centre. For a centred hero, set both justify-content and align-items to centre.

Experiment with the playground to see how adding items affects wrapping and spacing.

When to use grid instead

Flexbox is built for one dimension, a row or a column. For two-dimensional layouts, where rows and columns must line up, CSS grid is a better fit. Many layouts use both: grid for the page, flexbox for components.

Start with the simplest tool that works, and don't be afraid to mix them.

Common flexbox recipes

Centre anything: display flex, justify-content centre and align-items centre. Space items evenly: justify-content space-between. A sticky footer: make the page a column flex container with min-height 100vh and give the main area flex 1. Equal-width columns: give each child flex 1.

When items refuse to shrink, add min-width 0, a fix that solves many overflow problems with long text.

Flexbox on small screens

Use flex-wrap so items flow onto new lines instead of squeezing, and set a minimum width or flex-basis on each. Switching direction from row to column in a media query is a simple way to turn a side-by-side layout into a stacked one on phones.

Test layouts at several widths, and with longer text than you expect.

Reading the generated CSS

The CSS shown applies to the container only. Children automatically become flex items, and you can then fine-tune individual items with properties such as flex-grow, flex-shrink and align-self in your own stylesheet.

Questions