流式佈局和書寫模式

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 透過引入邏輯屬性和值使此操作變得更加容易，因此在垂直書寫模式下工作時，大小可以基於元素的行內大小和塊級大小。這在建立可以在不同書寫模式下工作的元件時非常有用。