Free tool No sign-up
CSS Flexbox Generator
Build CSS flexbox layouts visually — control direction, wrapping, alignment, and gap, then copy the output.
flexboxcssgeneratorlayouteffects
How to use
01
Set flex-direction
Choose row or column to set the main axis. Reverse variants flip the order of items without touching the HTML.
02
Toggle flex-wrap
nowrap keeps all items on one line. wrap lets items spill to a new line when they run out of space.
03
Justify along the main axis
justify-content controls how items are distributed along the main axis — start, center, end, or space options.
04
Align on the cross axis
align-items positions items on the perpendicular axis. stretch fills the container; baseline aligns text baselines.
05
Adjust gap
The gap property sets space between flex items on both axes — cleaner than using margins on individual items.
06
Copy the CSS
Hit "Copy CSS" to grab the full property block and paste it straight into your stylesheet.
CSS Flexbox syntax
Basic
display: flex;
Center
display: flex; justify-content: center; align-items: center;
Layout
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px;
| Property | Description |
|---|---|
flex-direction | Defines the main axis: row (default) | column | row-reverse | column-reverse. |
flex-wrap | Controls whether items wrap to new lines: nowrap | wrap | wrap-reverse. |
justify-content | Aligns items along the main axis: flex-start | center | flex-end | space-between | space-around | space-evenly. |
align-items | Aligns items on the cross axis for a single line: stretch | flex-start | center | flex-end | baseline. |
align-content | Aligns wrapped lines on the cross axis (only applies when flex-wrap is enabled). |
gap | Sets spacing between flex items. Shorthand for row-gap and column-gap. |
Browser support
flexbox has excellent browser support — safe to use in production without any fallback or prefix (IE 11 has partial support).
🟢 Chrome v29+
🟢 Firefox v28+
🟢 Safari v9+
🟢 Edge v12+
🟡 IE v11+