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

Code output

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.

Gap 12px

Preview height

Cross-axis centering, and the position of wrapped lines, only show when the container has extra height.

Items 4

Item settings

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-layout and .flex-item on your page.

日本語版はこちら

Please review the Terms of Service for this web app before using it.

Found a bug or have feedback? Let us know here.