CSS Flexbox Generator
Build flex layouts visually: set the container, then fine-tune each item's flex-grow, flex-shrink, flex-basis, order and align-self. Copy clean CSS with matching HTML, or Tailwind classes.
Presets
Container
Items
Item 1
margin-left: auto pushes an item (and everything after it) to the right, a common trick for nav bars.
Output
Preview size
Only changes the preview box, so you can test wrapping. It isn't part of the code.What Is CSS Flexbox?
A one-dimensional layout system for lining items up in a row or a column.
Setting display: flex on an element makes it a flex container and its direct children flex items. Items line up along the main axis (a row by default, or a column with flex-direction: column). The cross axis runs at right angles to it.
justify-content spreads items along the main axis and align-items lines them up on the cross axis. gap adds space between items without margins.
Each item can grow into free space (flex-grow), shrink when space runs out (flex-shrink), and start from a base size (flex-basis). The flex shorthand sets all three at once, e.g. flex: 1 1 0% for equal-width columns.
Flexbox is ideal for nav bars, toolbars, centring, media objects and cards that wrap. For two-dimensional page layouts (rows and columns lined up), use CSS Grid.
Flexbox Properties at a Glance
Container properties go on the parent; item properties go on the children.
flex-direction
row (default), row-reverse, column, column-reverse. Sets the main axis.
flex-wrap
nowrap (default) keeps items on one line; wrap lets them flow onto new lines.
justify-content
Spacing on the main axis: flex-start, center, flex-end, space-between, space-around, space-evenly.
align-items / align-self
Alignment on the cross axis for all items, or one item: stretch (default), flex-start, center, flex-end, baseline.
align-content
Spaces the lines of a wrapping container. It has no effect with nowrap.
flex: grow shrink basis
flex: 1 = 1 1 0%, flex: auto = 1 1 auto, flex: none = 0 0 auto. The default is 0 1 auto.
How to Use the CSS Flexbox Generator
Get your result in under ten seconds.
Pick a preset or start fresh
Try Navbar, Equal columns, Sidebar or Wrapping cards, or set the container options yourself.
Tune the items
Add or remove items, select one and set its grow, shrink, basis, order or alignment. Resize the preview box to test wrapping.
Copy the code
Switch between CSS, HTML and Tailwind and press Copy.
Why Use the CSS Flexbox Generator on Developers Web Tools
Fast, accurate and private — built for developers.
True preview
The preview uses exactly the CSS you copy, so what you see is what you get.
Per-item control
Set flex-grow, shrink, basis, order, align-self and auto margins for each item.
Helpful warnings
Tells you when a setting has no effect, such as align-content without wrapping.
Tailwind output
Get the same layout as Tailwind utility classes.
Clean code
Defaults are left out unless you ask for them.
Private
Runs entirely in your browser. Nothing is uploaded.
Frequently Asked Questions
Put display: flex; justify-content: center; align-items: center; on the parent. The container needs a height (or to be inside something with a height) for vertical centring to be visible. Try the Center preset.
It's short for flex: 1 1 0%: the item can grow and shrink, and starts from a size of zero, so all items with flex: 1 end up the same width.
justify-content works along the main axis (horizontal in a row) and align-items along the cross axis (vertical in a row). With flex-direction: column they swap.
It only spaces the lines of a container that can wrap. Set flex-wrap: wrap and make sure there's spare height in the container.
If an item has flex-grow or an auto margin, it takes up all the free space on its line, so there's nothing left for justify-content to share out.
order changes only the visual order. Keyboard focus and screen readers still follow the HTML order, so keep the HTML in a logical order.
Yes, in all current browsers (Chrome 84+, Firefox 63+, Safari 14.1+).
Gaps on Tailwind's spacing scale use its classes (gap-3 = 0.75rem = 12px at the default 16px font size); other values use exact arbitrary values like gap-[13px]. Flex-basis always uses an exact value, e.g. basis-[200px].
Only in your own browser (local storage), so it's still there next time. Press Reset to clear it.