# 通过观察行为而非记忆属性来构建CSS布局
CSS Grid和Flexbox之所以强大，是因为它们描述布局关系而非固定坐标。难点在于预测gap、justify-content、align-items、方向、换行、轨道和可用空间如何相互作用。这个生成器将抽象属性转变为带有预设和实时CSS的活生生的演练场。 5 快速启动预设
实时 每次更改CSS都更新
0 CSS中的框架依赖
# Flexbox vs Grid：在完善对齐之前选择模型
Flexbox
最适合一维流，项目按行或列排列并自然换行。
- 导航栏
- 按钮组
- 换行卡片
- 居中内容
CSS Grid
最适合二维结构，行和列定义组合的形状。
- 仪表板
- 画廊
- 表单
- 编辑区域
# 每个控件教给你的知识
| 控件 | CSS属性 | 关注点 |
|---|---|---|
| 方向 | flex-direction | 主轴如何流动 - 从行切换到列会改变整个布局逻辑。 |
| 换行 | flex-wrap | 项目保持在单行还是空间不足时流向新行。 |
| 间距 | gap | 项目之间的空间，无需在边缘断裂的边距。 |
| 水平对齐 | justify-content | 空闲空间如何沿主轴分布。 |
| 垂直对齐 | align-items | 项目如何在交叉轴上放置。 |
| 内容对齐 | align-content | 换行的flex行或grid行如何分配额外的交叉轴空间。 |
| 列数 | grid-template-columns | 在项目移到下一行之前，grid创建多少个相等的轨道。 |
| 容器大小 | width和min-height | 相同的CSS在可用空间变化时如何响应。 |
先缩放，再优化
首先将画布缩放到真实大小。然后调整间距和对齐。这样生成的CSS在真实条件下也能工作。# 可适配的干净CSS
.layout-playground {display: flex;flex-direction: row;flex-wrap: wrap;gap: 24px;justify-content: center;align-items: center;}
为什么可视化缩放很重要
许多布局错误仅在容器更窄、更高或填充不同数量的项目时才会出现。在CSS实时更新时进行缩放有助于发现尴尬的换行和脆弱的对齐选择。
推荐工作流程
一维流选择预设或Flexbox，二维结构选择Grid。
在复制CSS之前缩放画布，使布局经受住现实的约束。
使用gap作为项目之间的间距，而不是为每个子元素添加边距。
以生成的CSS为起点进行复制，然后添加项目特定的选择器和媒体查询。