flex 专为一维布局设计，主轴控制排列方向（row/column），交叉轴仅负责对齐；二维布局应使用 grid，混用时注意 flex 的 order 在 grid 区域内生效。
flex 适合一维排版，不是因为它“不够强”，而是它的设计目标就是管好一条线上的事情——主轴方向的排列与对齐。
Flex 的主轴 + 交叉轴本质是一条线的两个方向
你设 flex-direction: row，主轴就是水平的，所有子项默认挨个往右排；设 flex-direction: column，主轴就变垂直，子项从上往下堆。交叉轴永远只是“垂直于主轴”的辅助线，只负责对齐（align-items）、单行内垂直位置（align-self）或换行后各行之间的间距（align-content）。它没有“第2行第3列”这种坐标概念。
二维需求强行用 Flex 会迅速陷入嵌套与 hack 泥潭
常见翻车场景：
- 想让某个卡片横跨两行？得额外包一层容器，设
display: flex+flex-direction: column，再手动配flex: 1—— DOM 层级膨胀，语义丢失 - 侧边栏折叠后主内容要撑满？
flex得靠 JS 切类名 + 多个@media控制flex-direction和flex-basis；而grid只需改一行grid-template-columns - 子项高度不一致时，
flex-wrap换行依赖实际渲染高度计算，第二行首项容易被第一行高卡片“顶下去”，造成视觉错行
Flex 的优势其实在一维场景里才真正释放
导航栏、按钮组、卡片列表、表单控件横向对齐、垂直居中一个图标+文字组合……这些都只需要控制一个方向上的分布和对齐：
-
justify-content: space-between分散排列，比写margin或float干净得多 -
flex: 1自动撑满剩余空间，不用算calc(100% - 200px) -
order属性能不改 HTML 就调换顺序，适合响应式中重排优先级 -
flex-wrap: wrap配合min-width做响应式卡片流，简单直接
真正卡住人的，往往不是写不出来，而是写出来之后不敢动——加个新模块就得重算所有 flex-basis 和 min-width，改个断点要通读三页 CSS。一维问题交给 flex，二维问题交给 grid，不是非此即彼，而是各司其职。混用时最容易忽略的是：grid 容器里的子项，哪怕它自己是 display: flex，它的 order 也只在当前 grid 区域内生效，跨区域无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
