42. 🎯 CSS布局引擎 CSS Layout Engine ★★★★☆
🌏 Web 网页规范
- 布局决策树: CSS Grid (二维对齐) vs Flexbox (一维排列) 场景选型策略
- Subgrid 子网格: 嵌套元素继承父级轨道线，实现跨层级对齐
- Container Queries: @container 按父容器尺寸断点，取代全局 Media Query
- 层叠控制: @layer 显式声明优先级层级，:has() 关系选择器实现父级感知样式
📱 App 移动端规范
- SwiftUI 布局栈: HStack/VStack/ZStack 三轴堆叠，alignment guide 自定义锚点
- Compose 约束: ConstraintLayout 链式约束与 Flow helper，Modifier 链顺序敏感
- RN Flexbox: 默认 flexDirection: column，flexShrink 默认 1 (与 Web 的 0 不同)
- 安全区适配: Safe Area Insets 参与布局计算，避免刘海/圆角/底部手势条遮挡
CSS Grid 是二维布局利器，适用于需要同时控制行列对齐的场景（如仪表盘、图片画廊）；Flexbox 是一维排列首选，处理导航栏、卡片行等内容驱动流式排列。Grid 的 auto-placement 算法会自动将子项填入下一个可用网格槽位，配合 named grid lines（命名网格线）可实现语义化的区域定位。Subgrid 让嵌套子元素继承父级的轨道定义，解决多层卡片内部元素无法跨卡片对齐的经典难题。Container Queries (@container) 是组件级响应式的关键突破——组件根据自身容器宽度而非视口宽度调整布局，真正实现"一次编写，处处适配"。@layer 声明层叠优先级层级，让第三方库样式不再意外覆盖项目样式；:has() 关系选择器被称为"CSS 的父选择器"，可根据子元素状态反向控制父元素样式。
SwiftUI 的布局基于 HStack/VStack/ZStack 三轴堆叠原语，通过 alignment guide 自定义对齐锚点，布局结果由编译器在 SwiftUI 的约束求解器中一次性算出。Jetpack Compose 采用 ConstraintLayout 链式约束系统，支持 Flow helper 自动换行排列；其 Modifier 链顺序敏感——先 padding 再 background 与先 background 再 padding 产生截然不同的视觉效果。React Native 的 Flexbox 实现与 Web 存在微妙差异：默认 flex-direction 为 column（Web 为 row），flexShrink 默认值为 1（Web 为 0），这意味着 RN 子项默认会收缩而 Web 不会。所有原生平台都必须将 Safe Area Insets 纳入布局计算，防止内容被刘海屏、圆角或底部手势指示条遮挡。
(默认收缩)
(默认不缩)
Insets