Web Tools & Experiments

Flexbox CSS Generator

Container

Direction
row
row-reverse
column
column-reverse
Wrap
wrap
nowrap
wrap-reverse
Justify
Align Items
Align Content
Gap (px)
Padding (px)
Height (px)

Items

Count
Flex (grow / shrink / basis)
Align Self

Overrides

Tip: leave fields blank to use the global item values.
Edits here reflect live and will be included in the CSS output via :nth-child() rules.

Preview

HTML (click to copy)

Adds .flex-container and .item elements.

CSS (click to copy)

Includes container, base item rules, and any per-item overrides.

Presets

Copied to clipboard!