Flexbox 可视化

Flexbox / Grid 可视化

调节布局属性，实时预览并生成 CSS

布局参数

flex-direction

flex-wrap

align-content

子项数量：4

子项尺寸：64px

让某一项 flex-grow

justify-content

align-items

gap：12px

实时预览

4 项

生成的 CSS

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

.container > .item {
  width: 64px;
  height: 64px;
}

💡 使用说明

Flex 面板覆盖 direction / wrap / justify-content / align-items / align-content 与 gap。

align-content 仅在开启换行（非 nowrap）时生效，预览区已固定高度以体现对齐差异。

Grid 面板提供列数与对齐；gap 与对齐控件在两种模式下共用。