How to use the Flexbox Playground
- 1. Pick container settingsChoose flex-direction, flex-wrap, justify-content and align-items from the menus.
- 2. Adjust the itemsChange the number of boxes, the gap and how much item 1 grows.
- 3. Copy your CSSPress Get CSS code to get only the properties you changed.
The two axes of flexbox
Every flex container has a main axis and a cross axis. With flex-direction: row the main axis runs left to right, so justify-content moves items sideways and align-items moves them up and down. Switch to column and the two swap. Most flexbox confusion comes from forgetting this swap.
justify-content: space-between shares the free space only between items: gap = free space ÷ (items − 1). Three 100px boxes in a 600px row leave 300px free, so there is 150px between each pair and none at the edges. space-evenly would split the same 300px into four equal 75px spaces, including the edges.
Example: a centred navbar row
Set flex-direction to row, justify-content to space-between and align-items to center, with a 10px gap. The playground gives you:
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 10px;
}This is the classic navbar pattern: logo on the left, links on the right, all lined up on the same middle line. Set item 1 flex-grow to 1 and the first box stretches to fill the leftover space, which is how search bars in headers usually work.
- flex-wrap: wrap lets items move to a new line instead of shrinking.
- align-content only has an effect when there is more than one line of items.
- baseline lines items up by their text, handy for mixed font sizes.
Frequently asked questions
Why does align-content do nothing?
align-content spaces out lines of items. It only works when flex-wrap is wrap and the items actually spill onto more than one line.
Why is flex-direction always in my CSS?
It is included so the copied code is clear about the main axis. All other properties appear only when you change them from their default.
What does flex-grow do?
It tells an item how much of the leftover space to take. An item with flex-grow 1 next to items with 0 takes all of the free space.
Is the playground free to use?
Yes. You can play with every setting without signing up. We ask for a name and WhatsApp number once when you first copy the CSS, then all our tools open without asking.