CSS 书写模式正交流（Orthogonal Flows）：垂直与水平文档流混合时的布局计算
大家好，今天我们来深入探讨一个 CSS 布局中比较复杂但又非常有趣的话题：书写模式正交流（Orthogonal Flows）。在传统的 Web 开发中，我们通常习惯于水平的文档流，也就是文字从左到右排列，元素从上到下堆叠。但是，CSS 提供了 writing-mode 属性，允许我们改变文档流的方向，从而实现垂直书写等效果。当水平和垂直的文档流混合在一起时，布局计算会变得复杂，这就是我们今天要讨论的正交流问题。
1. 书写模式（Writing Modes）简介
writing-mode 属性定义了文本在块级元素中的排列方向。它主要影响以下几个方面：
- 文本流方向： 文字是水平排列还是垂直排列。
- 块级元素排列方向： 块级元素是水平堆叠还是垂直堆叠。
width和height的物理含义： 在水平书写模式下，width代表元素的宽度，height代表元素的高度。但在垂直书写模式下，width代表元素的高度，height代表元素的宽度。
writing-mode 属性有几个常用的值：
horizontal-tb： 默认值，水平方向从上到下。文本水平排列，块级元素垂直堆叠。vertical-rl： 垂直方向从右到左。文本垂直排列，块级元素水平堆叠。vertical-lr： 垂直方向从左到右。文本垂直排列，块级元素水平堆叠。
除了 writing-mode，还有一些相关的属性会影响文本方向，例如：
direction： 定义文本的阅读方向，通常用于处理从右到左的语言（如阿拉伯语）。text-orientation： 定义文本中字符的方向，例如，可以使文本垂直排列时，字符也垂直显示，而不是旋转 90 度。
2. 正交流（Orthogonal Flows）的概念
当一个元素的书写模式与它的包含块的书写模式不同时，就出现了正交流。这种情况下，元素的尺寸计算、定位和对齐都会受到影响。
举个例子：一个 writing-mode: horizontal-tb 的元素，它的父元素是 writing-mode: vertical-rl，那么这个元素就处于正交流状态。
正交流带来的挑战主要在于：
- 尺寸计算： 元素的
width和height属性的含义会随着书写模式的变化而变化。在正交流情况下，需要考虑父元素的书写模式对子元素尺寸的影响。 - 定位： 绝对定位和固定定位的参考点会受到书写模式的影响。
- 对齐：
align-items、justify-content等 Flexbox 和 Grid 布局属性的对齐方式会随着书写模式的变化而变化。
3. 正交流下的尺寸计算
在正交流情况下，元素的 width 和 height 的含义会发生互换。更准确地说，是逻辑宽度（logical width）和逻辑高度（logical height）与物理宽度（physical width）和物理高度（physical height）的概念需要区分清楚。
- 逻辑宽度： 指的是元素在当前书写模式下的宽度方向的尺寸。
- 逻辑高度： 指的是元素在当前书写模式下的高度方向的尺寸。
- 物理宽度： 指的是元素实际占据的物理宽度。
- 物理高度： 指的是元素实际占据的物理高度。
当元素处于正交流状态时，它的逻辑宽度会映射到物理高度，逻辑高度会映射到物理宽度。
例如：
<div style="writing-mode: vertical-rl; width: 200px; height: 300px;">
<div style="writing-mode: horizontal-tb; width: 100px; height: 50px; background-color: lightblue;">
This is a box.
</div>
</div>在这个例子中，父元素 div 的 writing-mode 是 vertical-rl，子元素 div 的 writing-mode 是 horizontal-tb。因此，子元素处于正交流状态。
- 子元素的逻辑宽度是 100px，逻辑高度是 50px。
- 由于正交流，子元素的物理宽度变成了 50px，物理高度变成了 100px。
为了更清晰地理解，我们可以用表格来总结：
| 书写模式 | 逻辑宽度 | 逻辑高度 | 物理宽度 | 物理高度 |
|---|---|---|---|---|
horizontal-tb |
width |
height |
width |
height |
vertical-rl |
height |
width |
height |
width |
vertical-lr |
height |
width |
height |
width |
4. 正交流下的定位
在正交流情况下，绝对定位和固定定位的参考点也会受到书写模式的影响。定位的 top、right、bottom、left 属性也需要根据书写模式进行相应的转换。
例如，如果一个元素的父元素是 writing-mode: vertical-rl，并且该元素设置了 position: absolute; top: 10px; left: 20px;，那么：
top: 10px实际上是相对于父元素的顶边的 10px，没有变化。left: 20px实际上是相对于父元素的右边的 20px。因为在vertical-rl模式下，左边变成了顶部，右边变成了底部，而left实际上是相对于右边的偏移量。
为了避免混淆，可以使用逻辑属性来替代物理属性：
inset-block-start： 对应于物理属性的top或left，取决于书写模式。inset-block-end： 对应于物理属性的bottom或right，取决于书写模式。inset-inline-start： 对应于物理属性的left或top，取决于书写模式。inset-inline-end： 对应于物理属性的right或bottom，取决于书写模式。
使用逻辑属性可以使代码更加语义化，并且可以更好地适应不同的书写模式。
例如，上面的例子可以改写成：
<div style="writing-mode: vertical-rl; position: relative; width: 200px; height: 300px;">
<div style="position: absolute; inset-block-start: 10px; inset-inline-start: 20px; background-color: lightblue;">
This is a box.
</div>
</div>无论父元素的书写模式如何变化，子元素都会相对于父元素的顶边偏移 10px，相对于父元素的左边偏移 20px。
5. 正交流下的对齐
Flexbox 和 Grid 布局属性在正交流情况下也会受到影响。align-items、justify-content 等属性的对齐方向会随着书写模式的变化而变化。
在 Flexbox 布局中：
- 主轴（main axis）： 指的是 Flex 容器中元素排列的方向。
- 交叉轴（cross axis）： 指的是与主轴垂直的方向。
在 Grid 布局中：
- 块轴（block axis）： 指的是块级元素排列的方向，通常与书写模式的方向一致。
- 行轴（inline axis）： 指的是行内元素排列的方向，通常与书写模式的方向相反。
当元素处于正交流状态时，Flexbox 和 Grid 布局属性的对齐方向会发生互换。例如，align-items: center 在水平书写模式下是垂直居中，但在垂直书写模式下会变成水平居中。
为了避免混淆，可以使用逻辑属性来替代物理属性：
align-content： 定义了 Flex 容器或 Grid 容器中，多行或多列的对齐方式。justify-content： 定义了 Flex 容器或 Grid 容器中，项目在主轴上的对齐方式。align-items： 定义了 Flex 容器或 Grid 容器中，项目在交叉轴上的对齐方式。justify-items： 定义了 Grid 容器中，项目在行轴上的对齐方式。place-content：align-content和justify-content的简写。place-items：align-items和justify-items的简写。
这些属性的值，例如 start、end、center、stretch 等，都会根据书写模式进行相应的转换。
例如：
<div style="writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; width: 200px; height: 300px; background-color: lightgray;">
<div style="writing-mode: horizontal-tb; width: 100px; height: 50px; background-color: lightblue;">
This is a box.
</div>
</div>在这个例子中，父元素 div 使用了 Flexbox 布局，并且设置了 align-items: center; justify-content: center;。由于父元素的 writing-mode 是 vertical-rl，因此 align-items: center 会将子元素水平居中，justify-content: center 会将子元素垂直居中。
6. 实际应用场景
正交流布局在一些特殊的场景下非常有用，例如：
- 垂直导航菜单： 可以使用
writing-mode: vertical-rl或writing-mode: vertical-lr来实现垂直的导航菜单。 - 亚洲语言排版： 一些亚洲语言（如中文、日文）既可以水平书写，也可以垂直书写。正交流布局可以方便地实现这种排版需求。
- 创意布局： 可以结合不同的书写模式和布局方式，创造出独特的视觉效果。
例如，我们可以使用正交流布局来实现一个垂直的标签页：
<div style="display: flex; height: 300px;">
<div style="writing-mode: vertical-rl; display: flex; flex-direction: column; background-color: lightgray;">
<button style="padding: 10px; border: none; background-color: lightblue; cursor: pointer;">Tab 1</button>
<button style="padding: 10px; border: none; background-color: lightblue; cursor: pointer;">Tab 2</button>
<button style="padding: 10px; border: none; background-color: lightblue; cursor: pointer;">Tab 3</button>
</div>
<div style="flex: 1; padding: 20px; background-color: white;">
Content of the selected tab goes here.
</div>
</div>在这个例子中，左侧的标签页使用了 writing-mode: vertical-rl 来实现垂直排列。
7. 注意事项
在使用正交流布局时，需要注意以下几点：
- 浏览器兼容性：
writing-mode属性在不同的浏览器中的兼容性可能存在差异。需要进行充分的测试。 - 可读性： 过度使用正交流布局可能会影响页面的可读性。需要谨慎使用。
- 逻辑属性： 尽量使用逻辑属性来替代物理属性，可以提高代码的可维护性和可移植性。
- 调试： 正交流布局的调试可能会比较困难。可以使用浏览器的开发者工具来检查元素的尺寸、定位和对齐方式。
8. 代码示例：一个复杂的正交流布局
下面是一个更复杂的代码示例，展示了如何使用正交流布局来实现一个响应式的网格布局：
<!DOCTYPE html>
<html>
<head>
<title>Orthogonal Flows Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 500px;
height: 500px;
gap: 10px;
writing-mode: horizontal-tb; /* Default writing mode */
}
.item {
background-color: #f0f0f0;
padding: 10px;
text-align: center;
font-size: 16px;
}
.item1 {
grid-column: 1 / span 2;
grid-row: 1 / span 1;
}
.item2 {
grid-column: 3 / span 1;
grid-row: 1 / span 2;
writing-mode: vertical-rl; /* Vertical writing mode */
}
.item3 {
grid-column: 1 / span 1;
grid-row: 2 / span 2;
writing-mode: vertical-lr; /* Vertical writing mode */
}
.item4 {
grid-column: 2 / span 2;
grid-row: 2 / span 1;
}
.item5 {
grid-column: 2 / span 1;
grid-row: 3 / span 1;
}
.item6 {
grid-column: 3 / span 1;
grid-row: 3 / span 1;
}
/* Responsive adjustments */
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: auto;
width: 100%;
height: auto;
}
.item1, .item2, .item3, .item4, .item5, .item6 {
grid-column: 1;
grid-row: auto;
writing-mode: horizontal-tb; /* Revert to horizontal on small screens */
}
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">Item 1 (Horizontal)</div>
<div class="item item2">Item 2 (Vertical RL)</div>
<div class="item item3">Item 3 (Vertical LR)</div>
<div class="item item4">Item 4 (Horizontal)</div>
<div class="item item5">Item 5 (Horizontal)</div>
<div class="item item6">Item 6 (Horizontal)</div>
</div>
</body>
</html>这个例子中，我们创建了一个网格布局，其中一些元素使用了垂直书写模式。为了实现响应式布局，我们使用了媒体查询，在小屏幕上将所有元素都恢复为水平书写模式。
9. 总结：理解书写模式，掌握布局技巧
总而言之，正交流布局是一个强大的 CSS 布局技术，可以帮助我们实现各种复杂的排版需求。理解书写模式的概念，掌握尺寸计算、定位和对齐的技巧，可以让我们更好地利用正交流布局来创建出独特的 Web 页面。记住，合理使用逻辑属性可以提高代码的可维护性和可移植性。
更多IT精英技术系列讲座，到智猿学院