Flexbox 演练场

怎么用

1. 选 flex-direction：row、column 或两个反向变体。
2. 调 justify-content 和 align-items，看子元素沿主轴和交叉轴移动。
3. 切 flex-wrap，观察空间不足时子元素怎么换行。
4. 拖 gap 滑杆，改子元素数量。
5. 复制生成的 CSS 块，直接贴进样式表。

常见用法

• 建立轴线直觉 —— 看着子元素实时移动，理解主轴与交叉轴的区别。
• 卡片居中 —— 组合两个 center 值，先看到效果再写进代码。
• 挑间距方案 —— 并排对比 space-between、space-around、space-evenly 的差异。
• 排查布局问题 —— 在本地复现顽固布局，找到可行组合后再对齐真实样式。

常见问题

问：覆盖了哪些属性？ 答：五个容器级属性：flex-direction、justify-content、align-items、flex-wrap、gap。为了让生成结果可预期，flex-grow 这类子元素级属性没有包含。

问：生成的 CSS 兼容旧浏览器吗？ 答：列出的属性属于现代 flexbox 规范，常青浏览器都支持。flex 容器的 gap 需要较新的浏览器；老版本 Safari 可能要改用 margin 方案。

问：能用自己的标记试试吗？ 答：预览只使用生成的子元素。把复制的 CSS 应用到你自己的元素上，再从那里继续迭代。