Flexbox Layout Generator
Combine row, column, alignment, wrap, and gap in one box, then copy the HTML and CSS you see. Presets cover the usual jobs: a row, align to the end, center, a column, wrapping, gap, and filling the width.
This tool has been used … times.
Presets
Box colors are for the preview only. The copied CSS does not include them.
Container
Direction (flex-direction)
Wrap (flex-wrap)
Main axis (justify-content)
Cross axis (align-items)
Lines (align-content)
Line packing applies only when items wrap.
Preview height
Cross-axis centering, and the position of wrapped lines, only show when the container has extra height.
Items 4
Item
Editing item 1. Click a box in the preview to switch items.
Sizing (flex)
flex: 1 ignores content size and makes equal widths. flex: auto keeps the content size and shares only the leftover space.
Order
This item only (align-self)
How to use
- Pick a preset, or set the container yourself.
- Click a box in the preview to edit only that item. The number on the box is its place in the HTML.
- The line under the preview shows if justify-content is acting horizontally or vertically. A column swaps the axes.
- Copy HTML and CSS, or CSS only, then rename
.flex-layoutand.flex-itemon your page.