Flex布局可视化设计器

交互式调试CSS Flexbox布局属性，实时预览效果

容器属性 (Container)

主轴方向

flex-direction

换行控制

flex-wrap

主轴对齐

justify-content

侧轴对齐

align-items

align-content

容器样式

容器高度

300px

间距

10px

实时预览

1

2

3

4

5

项目属性 (Items)

伸缩属性

flex-grow (放大比例)

0

flex-shrink (缩小比例)

1

flex-basis (初始大小)

单独对齐

align-self

排序与尺寸

order (排序顺序)

0

宽度

快速设置

代码已复制到剪贴板！

交互式CSS Flexbox布局可视化调试工具，实时预览容器和项目属性变化，支持代码生成与复制

站点所有消息通知及提示Tips内容！