Shape & Layout · Free generator

CSS Flexbox Playground

Free · no sign-up Live preview · copy or download the CSS

Every container property, one sandbox. Flip direction, justification, alignment, wrap and gap and watch six boxes obey in real time — then copy the exact CSS you dialed in.

Settings

Generated CSS — updates live


Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 15 minCSS Display & VisibilityWhat display:flex changes about the box.STEP 2 · 40 minCSS FlexboxThe full lesson this tool visualizes.STEP 3 · 30 minResponsive CSS PatternsWrapping rows as a responsive recipe.


  1. CSS Grid PlaygroundShape & Layout
  2. CSS Border Radius GeneratorShape & Layout
  3. CSS Button GeneratorTypography & Buttons
  4. CSS Hover Effects GeneratorAnimation & Motion
  5. CSS Box Shadow GeneratorShadows & Effects
  6. CSS Gradient GeneratorBackgrounds & Color


How it works


Every control here maps to one container property. flex-direction sets the main axis; justify-content distributes along it; align-items positions across it; wrap permits new lines; gap spaces between. The items deliberately vary in size so stretch, center and baseline visibly differ.


The fastest way to internalize the axes: set direction to column and watch justify-content suddenly control the vertical — the properties follow the axis, not the screen.


Run the code — try it yourself
Recreate the classic nav: logo left, links right, everything vertically centered — one flex container, space-between, align-items center.


exercise.html — editable


Frequently asked questions
justify-content isn't doing anything.
There's no leftover space to distribute — items fill the axis. Shrink them, or in column direction give the container height.
What's the difference between space-around and space-evenly?
around gives each item equal side margins (edges get half-gaps); evenly makes every gap, edges included, identical.
Where are the item properties like flex: 1?
This sandbox covers the container; grow/shrink/basis and align-self live on children — see the Flexbox lesson's sizing section.
When should I switch to Grid?
When you need rows AND columns simultaneously. One axis of distribution: flex. Two-dimensional placement: grid.


Keep going
Ten minutes of slider-flipping here beats an hour of reading — the axes become muscle memory. Formalize it in the Flexbox lesson, then meet the second dimension in the Grid Playground.
CSSmatic is a non-profit project, made by developers for developers.