UD5工具箱
这个工具和基础版 Flexbox 演练场有什么区别？
基础版 CSS Flexbox 交互演示 侧重于常用属性的入门操作，适合初学者快速上手。本高级演练场则覆盖了 Flexbox 规范中容器和子项的所有属性，包括 align-content、flex-shrink、flex-basis、align-self 和 order 等进阶控制项，适合需要深入理解弹性盒子每个属性行为的开发者。此外本工具还提供快速预设和主轴交叉轴可视化标注。
我调整的属性设置会被保存吗？
工具会将你的属性设置保存在浏览器本地存储中。当你再次打开页面时，上次使用的属性配置会自动恢复。如果你需要重置为初始状态，可以点击控制面板中的「重置全部」按钮。清除浏览器缓存后设置也会恢复默认值。
如何增加或删除子项数量？
预览区域下方提供了「+」按钮，点击即可向容器中添加新的子项。如果需要删除某个子项，先点击选中该子项，然后在左侧子项属性区域点击「删除此子项」按钮即可移除。默认状态下容器内有 5 个子项。
align-content 在单行布局下为什么不生效？
这是 CSS 规范的正常行为。align-content 属性仅在容器内存在多行项目时才有效果。当 flex-wrap 设为 nowrap（默认值）时，所有项目都在一行内排列，此时 align-content 没有可作用的空间。你需要先将 flex-wrap 切换为 wrap 或 wrap-reverse，并确保子项的总宽度超出容器宽度使其换行，才能观察到 align-content 的效果。
生成的 CSS 代码可以直接用于项目吗？
可以。代码面板生成的是标准 CSS 代码，包含 .flex-container 类选择器及其所有属性声明。你可以直接复制粘贴到项目的样式表中使用。建议根据实际项目需要修改选择器名称，例如将 .flex-container 替换为你项目中的实际类名。生成的代码不包含浏览器前缀，因为现代浏览器已全面支持 Flexbox，无需额外前缀。
预览区域中的主轴和交叉轴箭头是什么含义？
预览区域中标注了两个箭头方向，分别表示当前 flex-direction 设置下主轴和交叉轴的指向。主轴箭头表示项目排列的默认方向，交叉轴箭头表示与主轴垂直的方向。理解这两条轴的方向对于正确使用 justify-content 和 align-items 至关重要。例如当 flex-direction 为 row 时，主轴为水平向右，交叉轴为垂直向下；切换为 column 后主轴变为垂直向下，交叉轴变为水平向右。
flex-grow 和 flex-basis 有什么区别？
flex-basis 定义了项目在分配空间之前的初始尺寸，类似于 width 但参与 Flex 空间分配计算。flex-grow 则定义了项目在初始尺寸之外如何瓜分容器的剩余空间。例如容器宽度 500px，两个项目的 flex-basis 都是 100px，则剩余空间为 300px；若两者 flex-grow 都为 1，则各获得 150px 额外空间，最终各占 250px。若一个 flex-grow 为 1 另一个为 2，则前者获得 100px、后者获得 200px，最终分别占 200px 和 300px。
这个工具支持学习 CSS Grid 布局吗？
本工具专注于 Flexbox（弹性盒子）布局模型。如果你需要学习和调试 CSS Grid 布局，可以使用我们的 CSS Grid 调试覆盖层 或 CSS Grid 可视化调试器，它们专门针对 Grid 布局提供可视化的网格线叠加和属性调试功能。Flexbox 和 Grid 是两种互补的布局方案，建议两者都掌握。