How it works
The Flexbox Generator provides a visual interface for configuring CSS Flexbox layouts — adjust container and item properties and see the result update live in a preview canvas, then copy the generated CSS.
Flexbox is the CSS layout model designed for one-dimensional layouts — distributing items along a row or column. Its properties (justify-content, align-items, flex-wrap, gap, flex-grow, flex-shrink) are powerful but require understanding how container and item properties interact. This visual tool makes the relationship immediately visible.
How to use it: choose the flex direction (row or column), set justify-content (how items are distributed along the main axis), align-items (how items align on the cross axis), flex-wrap (whether items wrap or stay on one line), and gap. Add or remove child items to see how the layout adapts. Click individual items to set their flex-grow, flex-shrink, flex-basis, align-self, and order properties. Copy the container CSS and item CSS separately or together.
Core concepts visualized: - justify-content: flex-start, center, flex-end, space-between, space-around, space-evenly - align-items: flex-start, center, flex-end, stretch, baseline - flex-grow: 0 = fixed size, 1 = grows to fill available space, 2 = grows twice as much as flex-grow:1 items
Use cases: navigation bars, card grids, form layouts, button groups, sidebar + main content layouts, centering a single element vertically and horizontally (align-items: center; justify-content: center).
Frequently Asked Questions
- justify-content distributes space along the main axis (horizontal for row, vertical for column). align-items aligns items on the cross axis (vertical for row, horizontal for column). Think of it as: justify = along the flex direction, align = perpendicular to it.
- flex-grow: 1 means the item will grow to fill available space. If multiple items all have flex-grow: 1, they divide the available space equally. An item with flex-grow: 2 gets twice as much space as one with flex-grow: 1.
- Use flex-wrap: wrap when you have items that shouldn't be forced to shrink below their minimum size. With wrap, items that don't fit on one line flow to the next line instead of overflowing or shrinking infinitely.
- gap (or column-gap and row-gap) sets the space between flex items without using margins. It only applies between items — not at the outer edges of the container. This is the preferred modern alternative to margin-based spacing between flex items.