子容器不继承父容器的flex-direction，必须显式设置display: flex才能开启flex上下文；嵌套时需独立设置flex-wrap、gap、flex-basis与min-width等属性，并注意align-self仅作用于直接子元素。
flex嵌套时子容器不继承父容器的flex-direction
很多人以为给父div设了display: flex和flex-direction: column，它的子元素就自动变成“纵向flex容器”——其实不会。子元素默认仍是普通块级元素，必须显式声明display: flex才能开启flex上下文。
常见错误现象：
外层垂直排列正常，但想让某一行内多个卡片水平等宽排列，结果它们堆成一列、宽度不均、甚至溢出。
- 每个需要独立布局逻辑的层级，都得单独加
display: flex - 别依赖“父flex影响子盒模型”的直觉，CSS flex不具备继承性
- 嵌套后注意
flex-wrap：外层常设nowrap，内层可能需wrap来折行
用flex-basis配合min-width控制网格项最小尺寸
纯靠flex: 1在不同屏幕下容易导致卡片被压扁（比如文字多时内容溢出），而固定width又破坏响应性。真正可控的方式是组合使用flex-basis和min-width。
示例场景：三栏卡片布局，在桌面端占满整行，小屏下自动转为单列：
立即学习“前端免费学习笔记（深入）”；
.grid-row {
display: flex;
gap: 1rem;
}
.card {
flex: 1 1 calc(33.333% - 0.666rem); /* 减去gap影响 */
min-width: 280px; /* 小屏下撑开后触发换行 */
}-
flex: 1 1表示可伸缩+可收缩，避免死宽 -
calc()中减去gap总和（如3项×1rem gap → 实际只有2个gap） -
min-width不是为了限制最小，而是作为“换行临界点”——当容器宽度不足以容纳两个min-width时，flex会自动折行
避免margin破坏flex对齐，改用gap
在嵌套flex中混用margin（尤其margin-right或margin-bottom）极易引发对齐错乱：外层justify-content: space-between失效、内层项间距不一致、甚至出现意外滚动条。
-
gap是flex容器专属属性，只作用于直接子元素，不影响文档流 - 嵌套结构中，每层flex容器应各自设置
gap，不要靠子元素margin模拟 - IE不支持
gap？那就用margin+:not(:last-child)兜底，但务必只在最内层用，且避免与外层gap叠加
复杂布局中align-items和align-self的优先级关系
当外层设了align-items: center，但某个卡片内部图标要顶部对齐、文字要底部对齐——这时候不能只改外层，得靠align-self在具体子项上覆盖。
关键点：
-
align-self只对直接子元素生效，嵌套再深也没用 - 它优先级高于
align-items，但低于flex-direction: column下的justify-content - 若想让某张卡片整体上顶，而内部文字居中，应在该卡片自身设
display: flex; align-items: center; justify-content: center，而不是依赖外层调整
嵌套越深，越容易把对齐责任推给错误层级；先确认当前元素是不是flex容器，再决定用哪个属性。
