UD5工具箱
容器属性全覆盖
工具提供对 Flexbox 容器六个核心属性的完整控制：flex-direction（主轴方向）支持 row、row-reverse、column、column-reverse 四种取值；flex-wrap（换行行为）支持 nowrap、wrap、wrap-reverse；justify-content（主轴对齐）支持 flex-start、flex-end、center、space-between、space-around、space-evenly；align-items（交叉轴对齐）支持 stretch、flex-start、flex-end、center、baseline；align-content（多行交叉轴对齐）支持 stretch、flex-start、flex-end、center、space-between、space-around；gap 系列属性通过滑块精确调节行间距和列间距。每个属性的变化都会立即在预览区域中体现，帮助用户建立属性值与布局效果之间的直观映射。
子项属性精调
选中任意子项后，可通过滑块调整 flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（初始尺寸），通过按钮切换 align-self（单独对齐方式）和 order（排列顺序）。每个子项独立控制，方便对比不同配置下的布局差异。不同子项可以设置不同的属性值，从而观察差异化配置下的布局行为，这对于理解 Flexbox 的空间分配机制非常有帮助。
实时预览与快速预设
所有属性调整都会立即反映在可视化预览区域中，无需点击刷新。工具还提供多个常用布局预设，包括默认布局、水平居中、两端对齐、均匀分布、等分空间、垂直列、换行布局等，一键切换即可快速生成典型 Flexbox 布局方案。每个预设都对应了一组特定的容器属性值，用户可以在此基础上微调以满足具体需求。
CSS 代码生成与复制
每次调整属性后，工具会自动生成对应的完整 CSS 代码，显示在代码面板中。代码包含 .flex-container 选择器及其所有属性声明，用户可直接复制粘贴到项目样式文件中使用。这大大缩短了从学习到实践的路径。生成的代码格式规范，便于集成到现有的样式架构中。
轴线可视化
预览区域中标注了主轴和交叉轴的方向箭头，帮助用户直观理解当前 flex-direction 下两条轴的指向，降低理解门槛。主轴和交叉轴的方向会随着 flex-direction 的切换而动态调整，用户可以清楚地看到 justify-content 和 align-items 分别作用于哪个方向。