CSS Flex 布局可视化编辑

功能

• 七个属性各一排按钮：display、flex-direction、flex-wrap、justify-content、align-items、align-content、子项伸缩
• 实时预览带网格背景，位置类效果一眼可判
• 子项数量（1–8）与间距（0–64px）可调
• 「为什么看不出效果」：按当前取值判断并解释（align-content 需要多行、space-* 需要剩余空间、baseline 需要基线不同、固定宽度 + nowrap 会溢出）
• 反向排列会明确提醒：只改视觉顺序，键盘 Tab 与读屏仍按 DOM 顺序
• 每个选中项的按钮下方有一句它的说明
• 复制走的是完整的两段 CSS（容器 + 子项）与配套 HTML
• 预览与代码出自同一份声明，屏幕上什么样、复制走就是什么样

使用方法

1. 点几排按钮，看预览里的布局怎么变
2. 调子项数量与间距，做出贴近自己场景的样子
3. 注意预览下方有没有「为什么看不出效果」的提示
4. 复制 CSS 与 HTML，粘到自己的页面里

常见问题

justify-content 和 align-items 到底谁管哪个方向？

`justify-content` 管主轴，`align-items` 管交叉轴。主轴由 `flex-direction` 决定：`row` 时主轴是横向（justify 管左右、align 管上下），`column` 时主轴变成纵向，两者职责就对调了。所以「怎么让子项水平垂直都居中」的答案取决于 direction —— 默认 row 下是 `justify-content: center` + `align-items: center`，而 column 下写法一样但含义正好相反。点一下 direction 那排按钮就能看到这个对调。

为什么我改了 align-content 没有任何反应？

因为 `align-content` 管的是行与行之间的分布，而容器里只有一行时它无从发挥 —— 只有 `flex-wrap: wrap` 且子项真的换成了多行，它才有效果。工具在当前是 `nowrap` 时不会把这一条写进交付的代码里（写了是误导），并在预览下方说明。想看到它：把 wrap 调成 `wrap`，子项伸缩选「固定宽度」，再把子项数量加到 6 以上。

为什么 space-between 看起来和 flex-start 一样？

因为 `space-*` 分布的是剩余空间，而剩余空间为零时它们全都退化成同一个样子。最常见的原因就是子项把容器填满了 —— 子项伸缩选了「等分」或「固定宽度」，或者容器宽度刚好只够放下这些内容。把子项伸缩换成「按内容」、减少子项数量，或让容器更宽，就能看到区别。

flex: 1 与 flex: 1 1 0 有什么区别？

`flex: 1` 是简写，展开是 `flex: 1 1 0%`（basis 为 0），而 `flex: 1 1 auto` 的 basis 是内容宽度。这个差别在子项内容长短不一时很明显：basis 为 0 时各子项完全等分容器，与内容多少无关；basis 为 auto 时先按内容分配，再把剩余空间按比例加上去，于是内容长的那个更宽。工具里「等分」与「按内容」两档就是这个区别 —— 点一下，看子项 1 与子项 2 的宽度。