CSS Grid vs Flexbox选困难症患者的终极指南
选哪个？这是一个问题
每个前端开发者在面对页面布局时，都会陷入一个灵魂拷问：到底用 Flexbox 还是 Grid？
这就像纠结中午吃黄焉鸡还是麻辣烫——两个都好吃，但用错了场合就尴尬了。让我用人话帮你理清思路。
⚡ Flexbox：一维布局之王
Flexbox 的核心理念就一句话：把元素排成一行或一列，然后让它们学会自己分配空间。它就像军训时的队列教官，喊一声“向右看齐”——大家自动对齐，多余空间均匀分配。
什么时候用 Flexbox？
- 导航栏（Logo 在左，菜单在右）
- 水平居中对齐（“我终于让 div 居中啦！”）
- 卡片列表（每行自适应数量）
- 任何“沿着一个方向排列”的场景
.nav { display: flex; justify-content: space-between; align-items: center; }◻ CSS Grid：二维布局之神
Grid 就像你在 Excel 里画表格——先确定行和列，然后把元素塞进去。它适合那些“看起来像个网格”的布局。
什么时候用 Grid？
- 整个页面的骨架布局— header + sidebar + main + footer
- 图片墙 / 瀑布流
- 仪表盘 / 后台管理面板
- 任何“横竖都要对齐”的场景
.dashboard { display: grid; grid-template-columns: 250px 1fr; gap: 16px; }💡 黄金法则
简单粗暴版：如果布局是一维的，用 Flexbox；如果是二维的，用 Grid。
最后送你一句前端篭言：Flexbox 做组件内部，Grid 做页面整体。记住了！