Flexbox 高级演练场 - 所有属性可视化控制

第一步：了解界面布局

打开 Flexbox 高级演练场 后，你会看到页面分为三个主要区域：左侧是属性控制面板，包含容器属性和子项属性两个区块；右侧上方是实时预览区域，显示带有彩色方块的 Flex 容器；右侧下方是生成的 CSS 代码面板。预览区域中还标注了主轴和交叉轴的方向，帮助你直观理解当前布局的轴线指向。

第二步：调整容器属性

在左侧「容器属性」区域，你可以通过点击选项按钮切换 flex-direction、flex-wrap、justify-content、align-items 和 align-content 的值。通过拖动滑块可以精确设置 gap、row-gap 和 col-gap 的像素值。每次调整后，右侧预览区域会立即更新布局效果。

例如，将 flex-direction 切换为 column，你会看到主轴从水平变为垂直方向，预览区域中的交叉轴箭头也随之旋转。此时再调整 justify-content，控制的就是垂直方向上的间距分布。建议逐一尝试每个属性的不同取值，观察布局的渐变过程，这有助于建立对 Flexbox 工作机制的直观理解。

第三步：选中并调整子项

点击预览区域中的任意彩色方块即可选中对应子项，选中后左侧会显示该子项的属性控制项。你可以调整 flex-grow、flex-shrink、flex-basis 的数值，切换 align-self 的对齐方式，以及修改 order 的值来改变排列顺序。不同子项可以设置不同的属性值，从而观察差异化配置下的布局行为。

第四步：使用快速预设

控制面板顶部提供了一排预设按钮，包括「居中」「两端对齐」「均匀分布」「等分空间」「垂直列」「换行布局」等常用方案。点击任意预设会一次性设置多个容器属性，帮你快速生成典型布局，也可以在此基础上微调。预设功能特别适合快速验证常见的布局场景，比如水平垂直居中、等分布局等。

第五步：获取 CSS 代码

当布局效果满意后，查看右下角的代码面板，复制生成的 CSS 代码即可直接用于项目开发。代码会随着你的每次调整实时更新，确保你拿到的始终是当前布局对应的准确样式。建议将生成的代码粘贴到项目的样式文件中后，根据实际需求修改选择器名称。