Flexbox Generator
Visual flexbox playground — adjust container and child properties (flex-direction, justify-content, align-items, gap, flex-grow, etc.) and see the result live. Generates ready-to-use CSS.
.container {
display: flex;
}How to use
- 1 Adjust the container properties (flex-direction, justify-content, align-items, gap) using the dropdowns.
- 2 Set the number of child items and click any item to configure its individual flex properties (flex-grow, align-self, order).
- 3 The live preview updates instantly — see exactly how the layout behaves.
- 4 Copy the generated CSS and paste it into your stylesheet.
Key features
- Visual playground for all CSS Flexbox container and item properties
- Live preview updates instantly as you adjust dropdowns and inputs
- Per-child controls: flex-grow, flex-shrink, flex-basis, align-self, and order
- Generated CSS shows only non-default values for clean output
CSS Flexbox Layout
Flexbox (Flexible Box Layout) is a one-dimensional layout system designed for distributing space and aligning items along a single axis — either horizontally (row) or vertically (column).
Unlike CSS Grid (which works in two dimensions), Flexbox excels at arranging items in a line while giving you powerful control over alignment, spacing, and how items grow or shrink to fill available space. It's the go-to solution for navigation bars, button groups, card rows, centering content, and responsive layouts without media queries.
Flexbox operates with two key concepts: the flex container (the parent element with display: flex) and the flex items (its direct children). Properties set on the container control the overall layout direction and alignment, while properties on individual items let them override alignment, reorder themselves, or grow/shrink independently.
Key Flexbox Properties at a Glance
| Property | Applies to | What it does |
|---|---|---|
| flex-direction | Container | Sets the main axis: row (horizontal) or column (vertical). Use -reverse to flip the order. |
| flex-wrap | Container | Controls whether items wrap to a new line when they overflow. nowrap keeps them on one line. |
| justify-content | Container | Aligns items along the main axis. Options: flex-start, flex-end, center, space-between, space-around, space-evenly. |
| align-items | Container | Aligns items along the cross axis. Stretch (default), flex-start, flex-end, center, baseline. |
| align-content | Container | Aligns multi-line content when wrapping. Only works when flex-wrap is active. |
| gap | Container | Adds fixed spacing between items without affecting the edges. No margin hacks needed. |
| flex-grow | Item | How much an item grows relative to siblings when space is available. 1 means "take equal share of extra space." |
| flex-shrink | Item | How much an item shrinks when space is tight. 0 prevents shrinking. |
| flex-basis | Item | The initial size of an item before growth/shrinkage is applied. Can be a length (200px) or auto. |
| align-self | Item | Overrides the container's align-items for a single item. auto inherits the container value. |
| order | Item | Changes the visual order of items. All items default to 0. Lower values appear first. |
Common Use Cases
Navigation bars & menus
Distribute nav links horizontally with space-between, center them, or push the logo left and links right — all without float hacks.
Card rows with equal height
Use align-items: stretch to make all cards in a row the same height, regardless of their content.
Perfect centering
Combine justify-content: center and align-items: center to center any element both horizontally and vertically — finally, no more margin: auto tricks.
Reordering without changing HTML
Use the order property on items to rearrange their visual order for different screen sizes without touching the DOM.
Holy Grail layout components
Build the content + sidebar pattern with flex-grow on the main area and fixed widths on sidebars — responsive without media queries.
Form layouts & input groups
Align labels, inputs, and action buttons in a row. Use flex-grow: 1 on inputs to make them fill available space.