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

什么时候用 Flexbox？

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

什么时候用 Grid？

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