Flex容器使直接子元素成为flex item，其原有display值在布局中被忽略；display: contents可让子节点直接受父容器flex规则约束，而其他display值仅影响内部渲染。
flex 容器会强制子元素采用 flex item 模型
当一个元素设置 display: flex 或 display: inline-flex 后，它的**直接子元素**会自动成为 flex item，此时它们的原有 display 值（如 block、inline、table 等）**在布局计算中被忽略**——不是被覆盖，而是被 flex 布局模型接管。flex item 的盒类型统一按“原子级 flex 项”处理，不再参与常规的块/行内布局流。
- 即使子元素原本是
display: table-cell或display: list-item，在 flex 容器中也失去对应语义行为（比如不生成伪元素、不触发表格布局逻辑） -
display: none不受影响，仍会完全隐藏；但display: contents会让该子元素“消失”，其子节点直接升为 flex item（需注意浏览器兼容性） - 绝对定位元素（
position: absolute）会脱离 flex 流，但仍是 flex 容器的子元素，只是不参与主轴/交叉轴计算
flex item 的 display 值只影响内部渲染，不影响 flex 外部行为
flex item 自身可以设置 display，比如 display: block 或 display: inline，但这仅控制它**内部子元素的布局方式**，对它在 flex 容器中的尺寸、排列、对齐等毫无影响。
div.container {
display: flex;
}
div.item {
display: inline; /* 这个 inline 对它在容器里的 flex 行为零作用 */
width: 100px;
}- flex item 的宽高由
flex-basis、width、height、内容尺寸等决定，和自身display类型无关 - 若 item 内部有文本或子元素，
display: inline可能影响其内联上下文（比如 white-space 处理），但不会让它“变回行内框参与外层流” - 嵌套 flex 是常见且安全的：子元素设
display: flex，它既是父容器的 flex item，又是自己子元素的 flex 容器
display: contents 是唯一能“穿透” flex 容器的 display 值
display: contents 让元素本身不生成盒子，只保留其子节点。在 flex 容器中，这意味着：该元素被跳过，它的子节点**直接成为父 flex 容器的 flex item**。
.outer {
display: flex;
}
.skip {
display: contents; /* 它不占位，也不作为 item */
}
.skip > span {
/* 这些 span 直接变成 .outer 的 flex item */
}- 注意：IE 完全不支持
display: contents；Safari 15.4+ 才修复部分 flex 场景下的 bug - 如果
.skip有 margin/padding/border，这些样式全部失效（因为没盒） - DOM 结构不变，但 CSS 盒模型中它消失了——这对可访问性（如 screen reader）可能有隐式影响
不要用 display 覆盖 flex 布局意图
试图通过给 flex item 设置 display: block !important 来“退出” flex 布局是无效的。flex item 的行为由其父容器的 display 类型决定，不是由自身 display 控制。
立即学习“前端免费学习笔记（深入）”；
- 想让某个子元素不参与 flex 排列？用
position: absolute或移出容器结构 - 想混合块布局和 flex？通常应拆分容器：外层 flex，内部用常规块/行内布局，而非强行修改 item 的
display - 调试时发现 item 表现异常，优先检查父容器是否真为 flex、该元素是否为直接子元素、是否被
display: contents或visibility: hidden干扰
flex 的核心在于“容器定义规则，子项服从规则”。子元素的 display 值在 flex 上下文中基本退化为内部渲染提示，真正起效的是容器的 flex 属性和 item 的 flex 相关属性（flex-grow、align-self 等）。把注意力放在容器配置和 item 的 flex 协议上，比纠结子元素 display 更有效。
