它是一个Flex 布局的“可视化实验台”。
Flexbox 是 CSS 里最常用的布局方式，能轻松实现居中、等分、自动换行等效果。但它有十几个属性（flex-direction、justify-content、align-items……），光看文档很难理解每个属性的实际效果。
这个小工具把这些属性变成了下拉框和输入框，你改一下，右边画布里的方块立刻重新排列，同时下面自动生成对应的 CSS 代码。边调边看边学，比看文档快得多。
主要能做什么？
容器属性（控制整体布局）：
flex-direction：主轴方向（row / row-reverse / column / column-reverse）
justify-content：主轴对齐（flex-start / center / space-between / space-around / space-evenly 等）
align-items：交叉轴对齐（stretch / flex-start / center / baseline 等）
flex-wrap：是否换行（nowrap / wrap / wrap-reverse）
align-content：多行对齐（仅换行时生效）
gap：子项间距
子项属性（单独控制某个块）：
点一下画布里的方块，就能单独设置它：
flex-grow：放大比例
flex-shrink：缩小比例
flex-basis：基础尺寸
align-self：单独对齐方式
选中的方块会有橙色边框，一眼看清选的是哪个。
画布操作：
增加块：点一下加一个方块
减少块：点一下减一个
实时预览：改任何参数，画布立刻重排
代码生成：
下面文本框实时显示完整的 CSS 代码，包括容器样式和每个子项的样式
一键复制，粘到项目里就能用
预设与重置：
加载常用居中示例：一键套用“水平垂直居中”的经典组合
重置所有配置：恢复默认
适合谁用？
前端开发者：调布局时快速试参数，不用反复改代码。
学 CSS 的人：直观理解 Flex 各个属性的作用。
网页设计师：想看看某种布局效果长什么样。
教学 / 培训：演示 Flexbox 时用，直观易懂。
面试准备的人：复习 Flex 属性。
任何要写 Flex 布局的人。
用起来是什么感觉？
打开页面，顶部是一个深色大卡片，写着“Flexbox 可视化布局设计器 v2.0”，状态栏提示“实时渲染中 | 选中子项可单独配置”。
下面是左右两栏布局：
左边是控制面板，分两块：
容器属性：6 个下拉框和输入框，控制整体布局
子项属性：4 个输入框，控制当前选中的那个方块
右边是画布和代码：
上面是可视化画布，白色背景带网格点，里面有几个蓝色方块（默认 3 个），按当前参数排列。方块可以点选，选中的有橙色边框。
画布右上角有两个小按钮：“+ 增加块”、“- 减少块”。
下面是生成的 CSS 代码，深色背景、蓝色字体，实时更新。右上角有“复制 CSS”。
底部两个按钮：
加载常用居中示例：一键套用水平垂直居中
重置所有配置：恢复默认
操作流程就是：
改左边的下拉框或输入框，看右边的方块重排
点一个方块选中它，改右边的子项属性，看它单独变化
想加块就点“+ 增加块”
满意了点“复制 CSS”，粘到项目里用
整个过程实时反馈、所见即所得。
对学 Flex、调布局的人来说，比看文档、反复改代码试效果快多了，理解起来也直观。