Flexbox Layout Builder

Click the flexbox options and watch the boxes rearrange, then copy the CSS and HTML for your own page.

  • Processed on your device
  • Instant, no queue
  • Free, no sign-up
Advertisement

Click a box to edit it on its own.

Container

CSS

        
HTML

        

      

    

  

  




Advertisement
How to use Flexbox Layout Builder
  1. Change the Container options (direction, wrap, justify-content, align-items, gap) and watch the preview.
  2. Click a box to edit just that item: flex-grow, flex-shrink, flex-basis, order and align-self.
  3. Load a ready-made layout such as a header bar or wrapping cards, then copy the generated CSS and HTML.
About this tool
Flexbox lays items out along one line, the main axis. With flex-direction: row that line runs left to right; with column it runs top to bottom. justify-content spreads items along the main axis and align-items lines them up across it, on the cross axis. Remembering which axis is which is the key to flexbox, so the preview tells you the current main axis.


On each item, flex-grow decides how much leftover space it takes, flex-shrink how much it gives up when space runs out, and flex-basis its starting size. order moves it visually without changing the HTML, and align-self overrides the container's alignment for that one item. A single margin-left: auto pushes an item, and everything after it, to the far end, which is the classic trick for putting a login button on the right of a header.


The boxes have slightly different heights on purpose so you can see the difference between stretch, start, center, end and baseline alignment.
Questions and answers
When should I use flexbox instead of grid?
Use flexbox for one-dimensional layouts: a row of buttons, a header bar or a list of cards that wraps. Use CSS grid when you need to line things up in rows and columns at the same time.
Why does justify-content not center my items vertically?
justify-content works on the main axis. In a row that is horizontal, so use align-items: center to center vertically, or switch to flex-direction: column.
What does flex: 1 mean?
It is shorthand for flex-grow: 1, flex-shrink: 1 and flex-basis: 0%. Items with flex: 1 share the available space equally.
Why does align-content do nothing?
align-content only affects containers with more than one line, so it needs flex-wrap: wrap and enough items to wrap onto a second line.
Advertisement