CSS Flex布局编辑器/h1>
可视化调整Flex容器属性，动态管理子元素，实时生成CSS代码
CSS Flex 布局编辑器说明/h2>
Flexbox（弹性盒子）明CSS3 提供的一种强大的布局模式，专为解决一维布局问题而设计。它可以让容器中的子元素自动调整大小和位置，适应不同屏幕尺寸。
flex-direction决定主轴方向 code>row（水平，默认）row-reverse（水平反向） code>column（垂直） code>column-reverse（垂直反向） /p>
justify-content定义子元素在主轴上的对齐方式 code>flex-start code>center code>flex-end code>space-between（两端对齐，等间距） code>space-around（每个元素两侧等距） code>space-evenly（完全等距） /p>
align-items定义子元素在交叉轴上的对齐方式。stretch（拉伸填满，默认）flex-start code>center code>flex-end code>baseline（基线对齐） /p>
flex-wrap控制是否换行 code>nowrap（不换行，默认） code>wrap（换行） code>wrap-reverse（反向换行） /p>
flex 简写：flex: grow shrink basis。grow 控制放大比例，shrink 控制缩小比例，basis 定义初始大小。常用值：flex: 1 等价了1 1 0% /p>
使用方法左侧面板设置容器属性，点击预览区子元素可单独编辑其 flex 属性。提供居中布局、导航栏、卡片流等预设方案，复制的CSS 即可直接使用 /p>
Flexbox（弹性盒子）明CSS3 提供的一种强大的布局模式，专为解决一维布局问题而设计。它可以让容器中的子元素自动调整大小和位置，适应不同屏幕尺寸。
flex-direction决定主轴方向 code>row（水平，默认）row-reverse（水平反向） code>column（垂直） code>column-reverse（垂直反向） /p>
justify-content定义子元素在主轴上的对齐方式 code>flex-start code>center code>flex-end code>space-between（两端对齐，等间距） code>space-around（每个元素两侧等距） code>space-evenly（完全等距） /p>
align-items定义子元素在交叉轴上的对齐方式。stretch（拉伸填满，默认）flex-start code>center code>flex-end code>baseline（基线对齐） /p>
flex-wrap控制是否换行 code>nowrap（不换行，默认） code>wrap（换行） code>wrap-reverse（反向换行） /p>
flex 简写：flex: grow shrink basis。grow 控制放大比例，shrink 控制缩小比例，basis 定义初始大小。常用值：flex: 1 等价了1 1 0% /p>
使用方法左侧面板设置容器属性，点击预览区子元素可单独编辑其 flex 属性。提供居中布局、导航栏、卡片流等预设方案，复制的CSS 即可直接使用 /p>