只有直接作用于 display: flex 或 inline-flex 容器的选择器才生效，子元素的对齐、顺序、尺寸控制均依赖容器被正确识别为 Flex 上下文，需检查 computed 样式中 display 是否为 flex 且相关属性可编辑。
flex容器上写哪些CSS选择器才真正生效
只有直接作用在 display: flex 或 display: inline-flex 容器上的选择器，才能触发 Flex 布局行为。子元素的对齐、顺序、尺寸控制，全部依赖容器是否被正确识别为 Flex 上下文。
常见错误是给父级加了 flex 但忘了移除浮动、清除浮动或重置 display，导致子元素仍按块级流排布。检查方法：用浏览器开发者工具看该元素 computed 样式中 display 是否为 flex，且 flex-direction 等属性可编辑。
- 不能只靠类名推断——
.container类即使写了display: flex，也可能被后续规则覆盖 - 避免嵌套过深的选择器（如
.page .main .content .flex-row），优先用语义化类名 + 单层作用域 - 注意伪元素（如
::before）默认不参与 flex 排列，需显式设content: ""才能成为 flex item
justify-content 和 align-items 的选择器作用对象别搞错
justify-content 控制主轴方向（默认水平）的对齐，align-items 控制交叉轴方向（默认垂直）的对齐——它们都必须写在 flex 容器上，不是子元素上。
容易混淆的是：当 flex-direction: column 时，主轴变垂直，justify-content 就管上下对齐，align-items 反而管左右。所以不要死记“justify 是水平，align 是垂直”，要看实际主轴方向。
立即学习“前端免费学习笔记（深入）”；
-
justify-content: center让所有子项在主轴居中，但不会改变单个子项内部内容对齐 -
align-items: stretch（默认值）会让子项拉伸填满交叉轴高度/宽度，若子项有固定height或min-height，则可能失效 - 想单独控制某个子项的交叉轴对齐？用
align-self，它写在子元素上，且会覆盖容器的align-items
order 属性配合类选择器动态调整渲染顺序
order 属性允许你改变 flex item 的视觉顺序，而不影响 HTML 结构。它的值是整数，默认为 0，数值越小越靠前。
关键点在于：它只对同级 flex item 生效；不同层级的容器之间无法跨级排序；且 order 不影响语义顺序（对屏幕阅读器、SEO 无效）。
- 适合响应式场景：比如移动端把导航移到顶部，PC端放到底部，只需切换
.nav { order: -1; }和.nav { order: 99; } - 慎用负值做“隐藏”：虽然
order: -999能把某元素挤到最前，但如果其他元素没设order，它只是相对靠前，并非绝对首项 - 多个元素设相同
order值时，按 HTML 源顺序排列，这点常被忽略
flex-grow / flex-shrink / flex-basis 组合使用时的选择器粒度
这三个属性通常合并写成 flex 简写，例如 flex: 1 1 auto。它们必须写在 flex item 上，而不是容器上。
常见陷阱是：设了 flex: 1 后子项宽度没变化，往往是因为父容器没设宽度、或子项本身有 min-width 阻止收缩、或存在 white-space: nowrap 导致内容撑开。
-
flex: 0 0 auto表示不放大、不缩小、按内容宽高——适合图标、头像等固定尺寸元素 -
flex: 1等价于flex: 1 1 0%，注意第三个值是0%而非auto，这意味着它从零开始分配剩余空间 - 用属性选择器控制特定类型子项：
[data-role="main"] { flex: 2; }比用类名更灵活，尤其在 CMS 输出结构不可控时
真正难的不是记住语法，而是判断什么时候该调容器的 justify-content，什么时候该调子项的 margin 或 align-self；还有当 flex-wrap: wrap 开启后，多行情况下的 align-content 又成了新变量——这些叠加关系，得靠真实布局反复验证。
