只有直接作用于 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，数值越小越靠前。
