Flexbox（弹性盒子）和 CSS Grid（网格）是现代化前端开发中最常用的两大 CSS 布局模型。Flexbox 适用于一维布局（只控制行或者列的单轴排布），而 CSS Grid 则专为二维布局而设计（同时控制多行与多列的网格对齐）。

什么时候用 Flexbox？

Flexbox 非常适合一些局部小组件的对齐，例如导航条（Navbar）、按钮组（Button Group）、卡片内的文本和图标水平垂直居中等。其核心特点是让内容根据可用宽度弹性收缩和折行。

什么时候用 Grid？

CSS Grid 是整个网页大版面框架的黄金选择。当您需要规划大型的仪表盘组件、图片画廊展示墙、响应式的文章瀑布流等，且要求子元素在水平和垂直两个轴向上严格对齐时，Grid 是最简洁的解决方案。

常见问题解答

问：我该在什么时候用 Flexbox，什么时候用 CSS Grid？
答：用 Flexbox 处理一维布局，沿单行或单列分配项目；当你需要同时精确控制行和列时用 Grid，那是二维的。

问：justify-content 和 align-items 分别控制什么？
答：justify-content 沿主轴对齐项目，align-items 沿交叉轴对齐。如果你把 flex-direction 改成 column，这两个角色会互换。

问：grid-template-columns 里的 repeat(auto-fill, minmax()) 是什么？
答：它会创建尽可能多的等宽列以填满容器，每列至少达到 minmax 指定的宽度。这是无需媒体查询就能实现响应式卡片网格的基础。

问：为什么我的 flex 项目不肯收缩？
答：flex-shrink 默认是 1，但最小宽度 auto 会阻止收缩。把 min-width 设为 0 就能让项目收缩到内容尺寸以下。

问：这个 playground 会把我的布局上传吗？
答：不会。实时预览就在你的浏览器本地渲染，你的配置从不会被发送到服务器。