AI 摘要：本文详细介绍了如何在单栏布局中，通过现代 CSS（如 Grid、Container Query Units、border-image、伪元素等）创建“满屏延展”与“宽度突破”元素。作者比较了旧式 100vw 方法与基于 Grid 的新式做法，指出前者因滚动条计算问题较为落后，并展示了一个简单、可扩展的 Grid 结构可同时实现全宽元素、局部扩展元素，以及带全宽背景的局部内容。文章还讨论了细节问题如 box-sizing、负 margin、嵌套结构、浮动兼容性以及是否必须使用 Grid 等，最终总结：最佳方案依情景而定，但现代 CSS 已能极大简化此类复杂布局。

1. 背景与问题定义
• 起因来自 Reddit 讨论：如何实现内容区中部分元素「全宽（full-bleed）」或「突破（breakout）」布局
• 对比老方法（100vw+偏移）与新方法（基于 Grid 中央列与左右对称列）
• 旧方法缺陷：100vw 不计滚动条，易引发水平滚动条
• 新方法更现代、更具弹性

2. 基础布局（The Base Grid）
• 在 body 上设定单列 Grid，最大宽度限制为 min(100%, 60em)
• justify-content: center 居中内容
• 保留 content-box 内边距空间以确保文字留白
• 所有子元素（如标题、段落、图片）自然落入此单列结构

3. 实现 Full-Bleed 元素
• 将 html 设为 container-type: inline-size ，元素用 width: 100cqw 获取可用宽度（不含滚动条）
• 使用 justify-self: center 居中
• 注意：html 上不能有 margin、padding，否则影响计算基准
• 若中间有容器层级，可通过 var(--full-w) 传递容器宽度
• 对非图片元素设置 box-sizing: border-box; padding: .5em；对图片则避免 padding
• 替代方案：用负 margin（calc(50% - 50cqw)）调整横向位置

4. 实现 Breakout 元素
• 比主栏宽，但未满屏，宽度公式为 min(100cqw, 100% + 2*4em)
• 或使用负 margin 实现，适合文本类内容
• 可通过自定义属性 --dx 调整突破值（正为扩展，负为收缩）
• 实例展示诸如 .break-elem--mini、.break-elem--maxi 等不同宽度的组合

5. Full-Bleed 背景处理
• 使用 border-image 扩展背景至全屏，如 border-image: var(--img) fill 0/ / 0 50cqw
• 支持颜色填充、渐变、图像背景等
• 针对带角度渐变或复杂背景，可通过计算 50cqw - .5*var(--grid-w) 精确控制延展范围
• 针对窄屏问题，利用 max() 考虑边距，保证背景元素真正全宽
• 实图背景的更优方案：使用伪元素 ::before 绝对定位配合 inset 实现，可支持 background-size: cover

6. 组合使用与分离视觉样式
• 可组合类 .break-elem + .full-bleed-back 实现“突破+全宽背景”效果
• 视觉样式与布局样式分离（例如 .box 仅用于颜色与边框）
• 避免边框或背景与 full-bleed 背景冲突的示例

7. 嵌套与兼容性
• figure 与 img 示例：图片全宽但说明文字保持正常列宽
• 确保 img.full-bleed-elem { display: block } 可正确工作
• 为了跨浏览器兼容 justify-self 可作用 block 元素，暂时让 figure 定义自身为 Grid

8. 浮动元素兼容性
• 若需在同一布局支持浮动（float）图片等，可增加内容包装容器
• 替代 justify-self 为 margin-left: calc(50% - 50cqw) 以保持结构适应性

9. 最后思考：Grid 是否必要
• 若布局需求简单，可用 body 的 padding/margin + limited main 替代 Grid
• 若需要间距控制、自动对齐等特性，Grid 仍具优势
• 结论：取决于上下文，现代 CSS 为设计师提供了灵活的选择空间

AI 摘要：文章讨论 width: stretch 与 height: stretch 这两个新加入 CSS 标准的属性值。作者回顾其历史背景，说明它如何统一了过去 -webkit-fill-available 与 -moz-available 的实现，并探讨了它与 box-sizing: border-box 的区别、动画特性（animatable）以及当前的浏览器支持情况。文章指出，虽然 stretch 功能简单，但它解决了长期以来 width: 100% 受内边距影响导致溢出的问题，为布局控制带来了更直观、更可靠的选择。

1. stretch 的由来与标准化
• Chromium 浏览器自 2025 年 6 月起支持 stretch，统一了非标准属性 -webkit-fill-available 与 -moz-available。
• 在 @supports 出现之前，开发者难以根据浏览器正确选择对应实现。
• 这一特性被开发者 Dave Rupert 在 Bluesky 平台上重新发现，引起社区关注。

2. stretch 的工作机制
• 行为类似 width: 100%，但忽略 padding，因此不会因内边距造成溢出。
• 从技术上看，stretch 控制元素的 margin box 以匹配包含块的尺寸。
• 对比 box-sizing: border-box ：虽然二者可达相似效果，但 stretch 更语义化且更灵活。

3. 为什么考虑使用 stretch 而非通用 box-sizing
• 使用通配符选择器 * 设置 box-sizing: border-box 无法涵盖所有伪元素。
• 维护完整伪元素列表既繁琐又易错，而 stretch 可减少这类问题。
• 对某些场景而言，开发者可能希望保持 100% 不包含 padding 的默认行为。

4. 动画与过渡特性
• box-sizing 无法被动画化，但 stretch 可与 100% 间平滑过渡。
• 需启用属性 interpolate-size: allow-keywords 才能插值动画。
• 未来可通过 calc-size(stretch, size) 精确控制插值行为。

5. 浏览器兼容性与渐进增强方案
• 当前仅 Chromium 系列 (Opera 122+、Chrome/Edge 138+、Android 140+) 支持。
• 可通过 @supports 设置自定义属性 --stretch，为 Firefox 与 Safari 提供兼容实现。
• 一旦全面支持后，可直接使用 width: stretch。

6. 总结与开发者建议
• stretch 是一种小而实用的布局增强功能，提升工作流质量。
• 即使继续使用 box-sizing 也无妨，但理解并尝试新特性有助于优化设计思维。
• 多一种写法，意味着多一种选择，更贴合个人或项目的编码哲学。

CSS-Tricks

We Completely Missed width/height: stretch | CSS-Tricks

The TL;DR is that stretch does the same thing as declaring 100%, but ignores padding when looking at the available space.

AI 摘要：本文系统梳理了 SwiftUI 中的对齐 (Alignment) 概念，围绕 "以什么为对齐指南、对哪些视图进行对齐" 两个核心展开，深入介绍了对齐指南 (Alignment Guide) 的定义与自定义方法、显式值机制、特殊文本基线情况，以及在 VStack、HStack、ZStack、overlay、background、frame 等容器和修饰器中的具体表现，并通过 Layout 协议验证对齐机制，为开发者更好理解 SwiftUI 布局逻辑提供了清晰框架。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. 什么是对齐 (Alignment)
• 对齐是指在布局容器中视图根据对齐指南 (Alignment Guide) 的参考点或参考线进行排列
• SwiftUI 强调用两个核心问题：依据的对齐指南 + 哪些视图需要对齐

2. 对齐指南 (Alignment Guide)
• 定义：由 HorizontalAlignment 和 VerticalAlignment 构成，既可标识点也可标识线
• SwiftUI 预置值如 leading、center、trailing、top、bottom 等，并可组合
• 自定义对齐指南：通过实现 AlignmentID 并扩展 HorizontalAlignment / Alignment
• alignmentGuide 修饰器：为视图指定对齐指南显式值，覆盖默认值
• 显式值机制：nil → 使用默认值；返回值 → 设置显式值，即使值等于默认值
• 特殊对齐：firstTextBaseline、lastTextBaseline 随内容情况变化
• 复合容器的显式值计算规则：取子视图中特定基线显式值的最高或最低

3. Layout 协议与显式对齐
• SwiftUI 4.0 引入 Layout 协议，支持自定义布局容器
• explicitAlignment 方法允许开发者设置容器中视图的显式对齐值
• 缺省实现返回 nil，但自定义实现能验证基线计算规则
• 即使容器提供显式值，开发者仍可用 alignmentGuide 覆盖

4. 对齐适用于哪些视图
• VStack、HStack、ZStack：alignment 参数应用在子视图之间，而非子视图与容器
• 布局容器工作原理：容器计算子视图需求尺寸，于虚拟坐标系中摆放，再由父容器决定整体位置
• overlay、background：类似特殊 ZStack，主视图尺寸决定容器，附加视图按指南对齐
• frame：作为单子视图容器，强行修改建议尺寸，表现为子视图对虚拟视图对齐

5. 总结
• SwiftUI 对齐的精髓在于明确“对齐指南来源”与“对齐的作用对象”
• 掌握显式值与容器布局逻辑能减少开发者对对齐偏差的困扰
• 理论掌握后在实际开发中可构建复杂灵活的自定义布局

fatbobman.com

SwiftUI 布局 —— 对齐

深入解析SwiftUI对齐原理，结合Layout协议，详解对齐指南、显式值及first/lastTextBaseline，助你掌握VStack/HStack/ZStack布局精髓。解锁SwiftUI布局难题。

AI 摘要：本文深入解析了 CSS 中的对齐 (Alignment) 机制，强调“内容(content)”与“项目(item)”两个层级对齐逻辑在 Grid、Flexbox、Block 以及定位元素中的差异。文章不仅讲述了基础属性（如 align-, justify-, place-* ）的适用场景，还对 auto margin 、绝对定位、以及 safe alignment 等进阶知识点逐一拆解，并指出 对齐始终依赖于尺寸 (sizing) 与剩余空间 (free space)**。这是篇对 CSS 布局本质高度还原的长文，尤其适合想彻底理解 Alignment 背后的逻辑的开发者。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. 对齐基础理论 （The Alignment Theory）
• CSS 中存在约 10 个对齐相关属性，常令初学者困惑。
• 对齐分为 content level 与 item level。
• 常用属性类别：
• place-content（容器内容对齐）
• place-items（所有项目的对齐）
• place-self（单个项目的对齐）
• 属性均存在水平 (justify-*) 与垂直 (align-*) 两个维度。
• place-* 为两者速记写法，但常用分开书写。

2. Grid 布局对齐
• Grid Anatomy：容器(container) → 格子单元(cells) → 项目(items)。
• 内容层级：对齐的是 grid cells 作为整体；项目层级：对齐的是 cell 内单个项目。
• start / end 使用逻辑值而非物理 left / right，支持不同语言排版。
• Auto sizing：若设为 auto，grid cells 会填充或收缩，normal 默认值等于 stretch。
• auto vs 1fr 区别：
• auto 可收缩并依赖对齐调整。
• 1fr 吞下所有剩余空间，导致无法再进行 content-level 对齐。
• 跨单元格项目 (grid area)：对齐是在 grid area 内进行，而非单一 cell。

3. Flexbox 布局对齐
• Flexbox Anatomy：容器 → flex lines → flex items。
• 纵向轴 (cross axis)：
• 内容层级对齐：flex lines 可整体对齐。
• 项目层级对齐：item 可在 flex line 内独立对齐 (align-self)。
• 横向轴 (main axis)：
• 仅存在内容层级对齐 (justify-content)，项目不可单独对齐 (justify-self 无效)。
• flex-wrap：
• nowrap 禁止纵向内容层对齐 (align-content 失效)。
• wrap 激活 content-level alignment 即便只有一行。
• flex-direction：行列切换会翻转主轴与交叉轴，因此相同属性可作用于不同方向。
• **flex-grow 与对齐关系：填满剩余空间会禁用对应轴上的 content 对齐。

4. Block 容器与内联元素
• 在 Block container 中：
• 水平：item-level 对齐（justify-items, justify-self），没有内容层级对齐。
• 垂直：content-level 对齐 (align-content)，没有 item-level。
• inline 元素的特殊情况：
• 单纯 inline → 水平继承 text-align，无需 flex/grid。
• 混合 inline 与 block → 浏览器生成“匿名块盒 (anonymous block box)”封装 inline 元素，但这些盒子不可直接对齐。

5. Auto Margins
• 对齐的是 margin box 而非元素本身。
• margin: auto 会将剩余自由空间转化为 margin，本质是“吞掉空间”的机制。
• 在 Flexbox 主轴下依旧生效，即便没有 item-level alignment。
• 注意：Block 垂直方向 auto margin 无效，需要定义 width 才能触发水平居中。
• 与 place-self: center 的区别：前者 margin box 吞满，后者保持元素周围留有自由空间。

6. 绝对定位元素 (Absolutely-positioned elements)
• 对齐以 containing block 作为参考区域（父级 padding box 或视口）。
• inset 定义内缩区域 (IMCB)，对齐作用在该区域内。
• *-self 属性适用，但浏览器兼容性有限。
• 传统写法 （ left: 50%; top: 50%; transform: translate(-50%, -50%)）依旧可用，但推荐 inset: 0; place-self: center 更直观。

7. Safe Alignment
• 当内容超出容器（负自由空间）时，可仍然对齐，但滚动条可能导致内容不可达。
• 使用 safe 修饰符（如 justify-self: safe center）可避免此问题。
• margin: auto 的对齐方式天然就是“safe”，因其不作用于负自由空间。

8. 总结
• Alignment 逻辑核心：永远依赖剩余空间和元素尺寸。
• Grid、Flexbox、Block 各自有不同的默认行为和适用属性。
• 常见混淆点：
• auto vs normal vs stretch
• justify-items 和 justify-content 适用范围不同
• fr 与 flex-grow 会吞掉剩余空间，从而禁用对齐。

Css-Tip

The Fundamentals of CSS Alignment

This deep dive covers everything you need to know about CSS alignment. It's time to stop doing trial and error and finally understand how everything works!