CSS Flexbox 可视化生成器
可视化生成 CSS flexbox 布局：完整支持容器属性（display、
flex-direction、flex-wrap、justify-content、
align-items、align-content、gap）与单项属性
（order、flex-grow、flex-shrink、flex-basis、
align-self）。点击预览中的项即可独立编辑，实时预览布局，一键复制 CSS 代码。
内置居中、两端、等间距、垂直居中、顶部、底部、卡片网格、圣杯 8 组预设。适用于导航栏、
卡片列表、工具栏、表单按钮组等前端开发场景。所有处理在浏览器本地完成。
容器属性（.container）
选中项属性（.item · 项 1 ）
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 8px;
}
.item {
/* 默认值，无需显式声明 */
}当前共 3 个 flex 项，间距 8px。 已选中 项 1，可在右侧编辑其单独属性。
常见问题
Flexbox 的核心概念是什么？主轴与交叉轴如何区分？
Flexbox（弹性盒子）是 CSS 的一维布局模型，专为沿单一方向（横向或纵向）排列元素而设计。
核心概念：主轴（main axis）由 flex-direction 决定方向，
row / row-reverse 时主轴为水平方向，column /
column-reverse 时主轴为垂直方向；交叉轴（cross axis）
始终与主轴垂直。justify-content 控制主轴对齐，align-items 控制
交叉轴对齐——这是 flexbox 最常被混淆的两条属性，记住"主轴 justify / 交叉 align"即可。
flex-grow、flex-shrink、flex-basis 三个属性分别是什么含义？
三者合称"flex 三件套"，控制项在主轴方向上的尺寸分配：
flex-basis：初始尺寸，类似 width/height 但优先级更高。默认 auto
（按内容尺寸），设为 0 时不考虑内容大小，完全按 grow 比例分配。
flex-grow：放大比例。当容器有剩余空间时，按各项 grow 比例分配。若所有项
均为 1，则等分剩余空间；某项为 2 则分得 2 倍。
flex-shrink：收缩比例。当容器空间不足时，按各项 shrink 比例收缩。默认为 1
（允许收缩），设为 0 则不收缩。常用于固定宽度侧边栏。
简写 flex: 1 等价于 flex: 1 1 0%，flex: auto 等价于
flex: 1 1 auto，flex: none 等价于 flex: 0 0 auto。
justify-content 的 space-between、space-around、space-evenly 有什么区别？
三者都是把项分布在主轴上，但间距分配方式不同：
space-between：首尾贴边，剩余空间均分到项之间。N 个项产生 N-1 个等距间隔。
space-around：每项左右各分一半间隔，首尾与容器边距为项间间隔的一半。
N 个项产生 2N 个等距间隔（首尾各 1 个一半间隔）。
space-evenly：所有间隔（包括首尾与容器边距）完全相等。
N 个项产生 N+1 个等距间隔。
直观区别：space-between 首尾无空隙、space-around 首尾是项间一半、space-evenly 首尾与项间相等。
align-items 和 align-content 有什么区别？什么时候用 align-content？
align-items：控制单行内各项在交叉轴上的对齐方式，影响每一行内部项的位置。
align-content：控制多行整体在交叉轴上的分布方式，仅当
flex-wrap 不为 nowrap 且容器在交叉轴方向有剩余空间时生效。
关键区别：align-items 影响项在行内的位置，align-content 影响行在容器内的位置。
例如 3 行项换行后，align-items: center 让每行内的项在该行垂直居中，align-content: center
让 3 行整体在容器垂直方向居中。本工具在 flex-wrap 为 nowrap 时
自动禁用 align-content 选项，避免无效配置。
flex-direction: row 和 row-reverse、column 和 column-reverse 的区别是什么？
row（默认）：主轴为水平方向，项从左到右排列。
row-reverse：主轴为水平方向，项从右到左排列（DOM 顺序不变，视觉顺序反转）。
column：主轴为垂直方向，项从上到下排列。
column-reverse：主轴为垂直方向，项从下到上排列。
注意：reverse 不改变 DOM 顺序，仅改变视觉排列顺序。这与 direction: rtl
不同——后者改变文本方向，前者改变 flex 项排列。配合 order 属性可独立控制单项位置。
order 属性如何使用？为什么默认值是 0 而不是 1？
order 控制项在主轴上的排列顺序，数值小的在前。默认值为 0（不是 1），
这意味着不需要显式设置 order 的项都按 0 排序。若想让某项排在最前，设置负值（如 -1）即可，
无需修改其他项。若想让某项排在最后，设置正值（如 1）。
重要：order 仅改变视觉顺序，不改变 DOM 顺序，因此不影响 Tab 键
焦点顺序与屏幕阅读器朗读顺序。如需同步改变可访问性顺序，必须修改 DOM 结构。
本工具的 order 范围为 -5 到 5，覆盖绝大多数实际场景。相同 order 值的项按 DOM 顺序排列。
gap 属性是什么？为什么推荐使用它替代 margin？
gap（曾用名 grid-gap）是 CSS Box Alignment Module 引入的属性，
定义 flex / grid / multi-column 容器中项之间的间距。在 flexbox 中，gap 仅作用于
项之间，不影响容器边缘——这与 margin 不同。
相比 margin 的优势：
1. 不会产生外边距合并问题；
2. 不会在容器边缘产生多余间距；
3. 换行时间距自动应用，无需特殊处理；
4. 语义清晰，无需使用 :last-child 选择器去除末项 margin。
浏览器兼容性：Chrome 84+、Firefox 63+、Safari 14.1+ 全面支持。本工具的 gap 范围 0-48px。
数据会上传到服务器吗？
不会。本工具完全在浏览器内运行，所有属性调节与 CSS 生成由 JavaScript 在你本地执行， 不会发送任何配置或代码到服务器。全程零网络请求，可离线使用。