loot.tools

CSS Flexbox Generator

Build a flexbox layout without second-guessing which property does what. Switch flex-direction, toggle wrapping, and set justify-content and align-items while a live preview rearranges the items in real time. The tool writes the CSS for you and only includes the properties you've changed from their defaults, so you get a clean rule instead of a wall of declarations. Start from a preset like a centered box, a navbar with space between items, or a wrapping card row, then adjust. Everything runs in your browser.
Design

Set the flex container properties and watch the layout react live, then copy the CSS. Only the properties you change from their defaults are written out, so the output stays clean. It all runs in your browser.

CSS
.container {
  display: flex;
  gap: 16px;
}
Preview
1
2
3
4
5

What flexbox is good at

Flexbox lays out items in a single direction - a row or a column - and shares space between them. It's the right tool for navbars, toolbars, button groups, centering a box, or any strip of items that should line up and space out evenly. For two-dimensional grids of rows and columns at once, reach for CSS Grid instead.

The properties that matter

  • flex-direction sets the main axis (row or column)
  • justify-content spaces items along that main axis
  • align-items lines them up on the cross axis
  • flex-wrap lets items flow onto new lines when they run out of room, and align-content then spaces those lines (it only kicks in once wrapping is on)
  • gap adds consistent spacing between items

Copy clean CSS

The output keeps display: flex and adds only the properties you've moved off their defaults, which is how you'd write it by hand. Tweak the controls, watch the numbered preview react, and paste the rule straight into your stylesheet. Nothing you do here is uploaded anywhere.