Flex 布局可视化编辑器
免费使用
实时生成 CSS
一键复制
通过下拉菜单和滑块直观调整 Flex 容器及子项的各个属性，实时查看布局变化，并自动生成可直接使用的 CSS 代码。
容器属性
8px
子项属性
实时预览
CSS 代码
/* 容器样式 */\n.flex-container {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: stretch;\n align-content: stretch;\n gap: 8px;\n}
修改左侧属性，此处自动更新