CSS Grid和 Flexbox的世纪大战：到底谁才是布局之王？

当布局遇上选择困难症

每个前端新人都会在某个月黑风高的夜晚，对着屏幕发出灵魂拷问：Grid 还是 Flexbox？ 这问题堪比“甜粽还是咸粽”——两边都有人站队，两边都有道理，选错了还会被大佬 diss。

Flexbox：一维的暴脾气

Flexbox 的全称是 Flexible Box（弹性盒子），它的核心思想就是：在一行或一列里，让元素自己挤来挤去。

想象你在早高峰的地铁里——大家挤成一排，有人胖就占多点地方，有人瘦就缩着。这就是 Flexbox 的精神：一维排列，自动伸缩。

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

适合场景：导航栏、按钮组、卡片列表、居中大法。

Grid：二维的强迫症

CSS Grid 则是 二维布局系统，它把页面像 Excel 表格一样切分成行和列。

如果说 Flexbox 是地铁，那 Grid 就是宜家的样板间——每一格都规划好了位置。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 16px;
}

适合场景：页面骨架布局、图片画廊、仪表盘。

所以到底选哪个？

一行或一列 → Flexbox；行和列都有 → Grid；不确定 → 先用 Flexbox。

记住：Flexbox 和 Grid 不是仇人，是搭档。