应根据问题维度选择：需行列坐标（如跨区域、明确行列定位）用 Grid；仅单向排列对齐（如按钮组、表单项）用 Flex；现代布局常 Grid 套 Flex，分层处理语义区域与内部对齐。
该用 display: flex 还是 display: grid，不取决于“哪个更新”或“哪个更酷”，而取决于你正在解决的问题有没有明确的行列坐标系。
当元素需要落在“第2行第3列”或跨区域时，必须用 Grid
比如你要让 .sidebar 占第一列、.main 占第二列、两者都从第2行开始，并在页脚上方结束——这种定位天然依赖行列编号。Flexbox 没有行号、列号、grid-row、grid-column 或 grid-area，硬凑只能靠多层 wrapper + margin + width，极易错行、响应式断裂。
-
grid-template-areas在 Safari 16.4+ 才支持自动换行，旧版需显式写grid-area: sidebar - 移动端列数自适应？
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))一行搞定，不用写一堆@media -
justify-content在 Grid 容器里默认无效——它只响应justify-items或place-items
当只需控制“一行内怎么排”或“一列内怎么对齐”时，Flexbox 更直接
按钮组水平居中、表单项标签和输入框左对齐、卡片内头像+文字垂直居中——这些场景没有“第几行”的概念，只有主轴和交叉轴。Flexbox 的 justify-content 和 align-items 就是为这类问题设计的，轻量、语义清晰、调试直观。
-
flex-direction: row时，justify-content控制水平，align-items控制垂直；换成column则角色互换 -
height: 100%在 Flex 子项里常失效，因为父容器没显式高度；改用min-height: 0或明确设height才能触发继承 - 动态增减菜单项？Flex 不依赖预设轨道数，新增后自动排列，DOM 和 CSS 都干净
混用不是妥协，而是分层职责
现代页面布局几乎都是 Grid 套 Flex：外层用 display: grid 划分语义区域（header / main / footer），内层用 display: flex 处理区域内部对齐（比如 header 里的 logo + nav + search）。
立即学习“前端免费学习笔记（深入）”；
- 在 Grid 容器里给子项再设
display: flex是合理操作；但若子项内部又套一层display: grid，大概率是层级职责没分清 - Flex 嵌套超过 3 层（如
.grid → .row → .col → .card-content），视觉逻辑已超一维范畴，调试困难，应考虑抽离为独立 Grid 区域 - Grid 容器内设
justify-content是无效的——浏览器直接忽略；同理，Flex 子项设grid-column也无效
真正容易被忽略的，不是语法，而是「问题维度」：一旦你发现自己在反复计算 margin、模拟行高、手动设 width 来对齐多个方向的元素，说明已经越过了 Flexbox 的能力边界——这时候别调参，换 Grid。
