Flexbox Playground
Pick the direction, wrapping and alignment, add items and set how they grow and shrink. The boxes update as you go and the CSS is ready to copy.
The orange fill, numbers and outline in the preview are only there so you can see the boxes. They are not part of the CSS.
About Flexbox Playground
Flexbox is the layout method most pages rely on for rows of buttons, navigation bars, card lists and centred content, yet its settings are easy to mix up. Which one moves items along the line, and which one moves them across it? This playground answers that by letting you change one setting at a time and see the boxes respond immediately.
Set the direction, decide whether items wrap onto new lines, choose how they are spaced and aligned, then set how each item grows and shrinks. The CSS for the container and the items is written as you go, together with a matching HTML skeleton, so you can move straight from experiment to a working layout.
How to use Flexbox Playground
- Choose a direction and a wrap setting to decide how the main and cross axes run.
- Pick justify content and align items to place the boxes along and across those axes.
- Change the number of items, the gap and the item size, and set grow, shrink and basis if you need them.
- Copy the CSS and the HTML into your page.
Common uses
- Centring a block of content both ways
- Laying out a navigation bar with the logo on the left and links on the right
- Making a row of cards that wrap onto new lines on narrow screens
- Learning what each flexbox property does before using it in a project
Frequently asked questions
What is the difference between justify content and align items?
Justify content places items along the main axis, which is the direction you chose, so in a row it works left to right. Align items places them across it, so in a row it works top to bottom. Switching the direction to column swaps the two axes, which is why the same setting seems to change meaning.
Why does align content do nothing?
Align content only has an effect when items wrap onto more than one line, because it decides how the lines share spare space. With wrapping off there is only ever one line, so the setting is hidden here until you switch wrap on.
What do grow, shrink and basis mean?
Basis is the size an item starts from. Grow says what share of any spare space the item takes, and shrink says what share of any shortage it gives up. The three are written together as the flex shorthand, for example flex: 1 1 auto.
Should I use gap or margins between items?
Gap is usually better because it puts space only between items and never on the outer edges. It works in flexbox in all current browsers, and one value covers every item, so the code stays shorter.