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