g3n-data
繁中
← All tools

CSS Flexbox Generator

Preview real Flexbox layout at different container sizes, tune each item, and copy CSS and sample HTML locally.

01 / Quick start

Start with a layout

02 / Container

Set the axes and alignment

This is a single line: align-content has no effect.

03 / Items

Tune an item

3 / 8

These ranges limit this editor, not the CSS specification.

04 / Browser preview

See the real Flex layout

Main axis horizontal →Cross axis vertical
1Item 1
2Item 2
3Item 3

Width, height and tile appearance are preview-only. Retest the copied layout with your real content and container size.

05 / Copyable result

Bring it into your project

CSS

.flex-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: stretch;
  gap: 16px;
}
.flex-layout > .flex-item-1 { flex: 0 1 auto; align-self: auto; }
.flex-layout > .flex-item-2 { flex: 0 1 auto; align-self: auto; }
.flex-layout > .flex-item-3 { flex: 0 1 auto; align-self: auto; }

HTML

<div class="flex-layout">
  <div class="flex-item-1">Item 1</div>
  <div class="flex-item-2">Item 2</div>
  <div class="flex-item-3">Item 3</div>
</div>
HTML reading order1 · 2 · 3

Settings stay on this page. They are not uploaded, saved or added to the URL. Need a two-dimensional layout? Use CSS Grid.

How to use this tool

Start with a layout preset, adjust container and item properties, then test preview dimensions. Compare CSS with the sample HTML before copying.

When not to use it

A preview with sample tiles cannot prove your real content fits. Preview dimensions do not create breakpoints. Reverse changes visual order only; test HTML source, keyboard order and narrow screens in your project.

Read the guide →