CSS Flex 布局可视化编辑工具

可视化生成 CSS Flexbox 布局代码。支持实时调整 flex-direction、justify-content、align-items 等容器属性， 以及每个子项目的 flex-grow、align-self、order 等属性。支持添加/删除项目，一键复制 CSS 代码。

1Item
2Item
3Item

📦 Flex 容器属性

px
Wpx
Hpx

📋 Flex 子项目属性

共 3 个项目，点击删除按钮移除最后一个项目

● 项目 1
flex-grow
flex-shrink
flex-basis
px
align-self
order
● 项目 2
flex-grow
flex-shrink
flex-basis
px
align-self
order
● 项目 3
flex-grow
flex-shrink
flex-basis
px
align-self
order

CSS 代码

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

.flex-item {
  flex: 0 1 auto;
}