align-self和order属性仅对flex容器的直接子元素（flex item）生效，必须使用直接子选择器（>）精确控制，后代选择器无效，且二者不能被父容器代理设置。
Flexbox 本身不改变 CSS 选择器的语法或匹配逻辑，但会显著影响选择器「生效时的实际布局效果」——尤其是当选择器目标是 flex 容器或其直接子项时，很多看似合理的样式会被 flex 的默认行为覆盖或忽略。
flex 容器上使用后代选择器（如 .container .item）容易失效
Flex 布局中，只有容器的**直接子元素**才成为 flex item；后代选择器匹配到的嵌套元素（比如 .container div ul li）完全不受 flex 属性控制，justify-content、align-items 等对它们无效。
- 错误写法：
.flex-container .nested-item { align-self: center; }→ 不起作用，因为.nested-item不是 flex item - 正确做法：把需要参与 flex 布局的元素提升为容器的直接子级，或在外层再套一层
display: flex - 特别注意：
float、clear、vertical-align在 flex item 上被强制设为none，即使选择器能选中也无效
> 直接子选择器是控制 flex item 的关键手段
绝大多数精确控制 flex 项目的行为（比如首尾间距、特定位置伸缩）都依赖 >，因为它能确保只作用于真正的 flex item，避免意外影响深层嵌套结构。
- 常用场景：
.flex-container > :first-child设置第一个项目左外边距为 0 - 慎用
:nth-child(n)：它按 DOM 顺序计数，不是按 flex 排序后的视觉顺序；如果中间有非元素节点（如注释、文本节点），可能错位 - 更稳妥的替代：
:nth-of-type()或给关键项目加明确类名（如.nav-logo、.nav-menu）
属性选择器（如 [data-role="sidebar"]）适合响应式 flex 切换
在媒体查询中，靠 class 切换布局容易导致样式冗余；用自定义属性配合属性选择器，能干净地解耦结构与行为。
- 示例：
@media (max-width: 768px) { [data-flex-order="main"] { order: 1; } [data-flex-order="aside"] { order: 2; } } - 优势：HTML 结构不变，CSS 只需改属性值就能重排，避免 class 名污染和 JS 干预
- 注意：不要用
[style]这类动态内联样式做判断，优先用语义化 data 属性
align-self 和 order 必须作用于 flex item 本身
这两个属性只在 flex item 上生效，且不能通过父容器的选择器“代理”设置。常见误区是试图在容器上用后代选择器批量设置子项的 align-self，结果无效。
- 有效：
.flex-container > .sidebar { align-self: flex-start; } - 无效：
.flex-container .sidebar { align-self: flex-start; }（除非 .sidebar 恰好是直接子元素） - order 属性尤其敏感：它只改变视觉顺序，不影响 DOM 顺序，SEO 和可访问性仍按原始 HTML 流执行
真正容易被忽略的是：flex 布局下，选择器的「匹配成功」不等于「样式生效」——必须确认目标元素是否为直接子元素、是否受 flex 规则接管、以及是否有更高优先级的 flex 默认值覆盖了你的声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
