流式布局和书写模式

CSS 2.1 规范详细描述了正常流的行为，假设水平书写模式。布局属性应该在垂直书写模式下以相同的方式工作。在本指南中，我们研究了在使用不同的文档书写模式时流布局的行为。

这不是 CSS 中书写模式使用的综合指南，这里旨在记录流布局与书写模式交互的可能意想不到的方式。另请参阅部分提供了更多书写模式资源的链接。

书写模式规范

CSS 书写模式 3 级规范定义了更改文档书写模式对流布局的影响。在书写模式简介中，规范指出,

"CSS 中的书写模式由 writing-mode、direction 和 text-orientation 属性确定。它主要通过其内联基线方向和块流方向来定义。"

规范将内联基线方向定义为一行上内容排序的方向。这定义了内联方向的开始和结束。开始是句子开始的地方，结束是文本行结束的地方，然后文本行将开始换行到新行。

块流方向是框（例如段落）在该书写模式下堆叠的方向。CSS writing-mode 属性控制块流方向。如果要将页面或页面的一部分更改为 vertical-lr，则可以在元素上设置 writing-mode: vertical-lr，这将改变块的方向，从而也改变内联方向。

虽然某些语言将使用特定的书写模式或文本方向，但我们也可以使用这些属性来实现创意效果，例如垂直运行标题。

块级流方向

writing-mode 属性接受以下值：horizontal-tb、vertical-rl 和 vertical-lr。这些值控制页面上块级元素的排列方向。默认值为 horizontal-tb，表示块级元素从上到下排列，行内元素从左到右排列。从左到右的语言（如英语）和从右到左的语言（如阿拉伯语）都使用 horizontal-tb。

以下示例展示了使用 horizontal-tb 的块级元素。

vertical-rl 值将使块级元素从右到左排列，行内元素从上到下排列，如以下示例所示。

最后一个示例演示了 writing-mode 的第三种可能值 - vertical-lr。它使块级元素从左到右排列，行内元素从上到下排列。

嵌套书写模式

当嵌套的盒子被分配了一个与父元素不同的书写模式时，行内级盒子将显示为具有 display: inline-block。

块级盒子将建立一个新的块级格式化上下文，这意味着如果其内部显示类型为 flow，它将获得一个计算后的显示类型 flow-root。以下示例展示了这一点，其中显示为 horizontal-tb 的盒子包含一个浮动元素，该元素由于其父元素建立了新的 BFC 而被包含在内。

替换元素

替换元素，例如图像，不会根据 writing-mode 属性改变其方向。但是，替换元素（例如包含文本的表单控件）应该匹配正在使用的书写模式。

逻辑属性和值

当你在除 horizontal-tb 之外的书写模式下工作时，许多映射到屏幕物理尺寸的属性和值看起来很奇怪。例如，如果你给一个盒子设置 100px 的宽度，在 horizontal-tb 中，它将控制行内方向的大小。在 vertical-lr 中，它控制块级方向的大小，因为它不会随着文本旋转。

因此，我们引入了新的属性 block-size 和 inline-size。如果我们给一个块设置 100px 的 inline-size，无论我们是在水平书写模式还是垂直书写模式下，inline-size 始终表示行内方向的大小。

CSS 逻辑属性和值模块包括用于控制边距、填充和边框的属性的逻辑版本，以及其他映射，用于我们通常使用物理方向来指定的项目。

摘要

在大多数情况下，当更改文档或文档部分的书写模式时，流式布局按预期工作。这可以用于正确排版垂直语言或出于创意目的。CSS 通过引入逻辑属性和值使此操作变得更加容易，因此在垂直书写模式下工作时，大小可以基于元素的行内大小和块级大小。这在创建可以在不同书写模式下工作的组件时非常有用。