Flexbox 与 Grid 布局全线对比指南

本文系统梳理 CSS 最强大的两种布局系统——Flexbox（一维，2012 年推出）与 Grid（二维，2017 年推出），帮助开发者理解各自适用场景、关键属性及最佳实践。

要点：
- Flexbox 适合单轴布局（导航栏、按钮组、卡片内部对齐、居中），通过容器属性（flex-direction、justify-content、align-items 等）和项目属性（flex-grow/shrink/basis、align-self）控制。
- Grid 专为二维布局设计，适用于页面外壳、仪表盘、图片画廊等场景。核心属性包括 grid-template-columns/rows、grid-template-areas、auto-fill/fit、grid-column/row 定位等。
- 推荐模式：Grid 负责宏观页面结构，Flexbox 负责内部组件微观布局。文中给出 5 种真实布局模式（响应侧边栏、12 列仪表盘、自适应卡片画廊等）及代码示例。
- 同时提供 Tailwind CSS 对应的 Flexbox 与 Grid 类参考，以及常见错误（如用 margin 代替 gap、fr 优于 %、忘记 grid-auto-rows 等）与建议。

链接：

#开发者 #工具 #CSS #Flexbox #Grid #布局 #前端

📢 频道：@DevToolboxHub