CSS Flexbox Generator

CSS Flexbox Generator lets you build a flexbox layout visually. You set the container’s display, direction, wrapping, justify-content, align-items, align-content, gaps, size, padding and background, and each item’s order, flex-grow, flex-shrink, flex-basis and align-self. Items can be added, removed, renamed and reordered, and the live preview is styled by exactly the CSS that the tool generates.

Flexbox is the standard way to align and distribute items in one direction, but its properties interact in ways that are easier to understand by seeing them. Experimenting visually and copying the resulting CSS is faster than trial and error in your stylesheet, and helps you learn what each property does.

1. Set the container properties, such as direction, wrapping and justify-content.
2. Adjust gaps, width, height, padding and background.
3. Edit the sample items — label, order, grow, shrink, basis and align-self.
4. Add, remove or reorder items with the buttons on each card.
5. Watch the live preview update as you go.
6. Copy or download the CSS and HTML.

• All main flex container properties
• Separate row and column gaps
• Per-item order, grow, shrink, basis and align-self
• Add, remove and reorder up to 12 items
• Live preview styled by the generated CSS
• Validation for every size value
• Clean CSS that omits default item values
• Copy and download CSS, HTML and a standalone demo page

• Use the ↑ ↓ buttons, not order, when the visual order should match reading order.
• Prefer gap over margins for spacing between items.
• Use flex: 1 1 0 for equal-width columns that share space evenly.
• Turn on wrapping for rows of cards so they reflow on small screens.
• Check the result at several screen widths in your own page.