Flexbox 布局生成器

可视化配置 Flexbox 容器与子项属性，实时预览布局效果并一键复制 CSS 代码。

快速预设

flex-direction

justify-content

align-items

flex-wrap

align-content

gap（px）

padding（px）

子项列表

编辑子项 1

flex-grow

flex-shrink

flex-basis

order

width

height

背景色

align-self

CSS 代码

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  align-content: stretch;
  gap: 8px;
  padding: 8px;
}