时间：2026-10-20 编辑：
二、块级布局与行级布局的维度转换
这张图展示了在水平书写模式下的两种维度。
这张图片展示了纵向书写模式下的两种维度。
在CSS布局中，块级方向和行内方向是两个核心概念。
概念 | 定义 | 在 | 在 |
块级方向 | 块级元素的堆叠方向 | 从上到下（垂直） | 从右到左（水平） |
行内方向 | 文本行的排列方向 | 从左到右（水平） | 从上到下（垂直） |
布局行为：
在horizontal-tb模式下，块级元素独占一行并占据全部可用宽度，行内元素并排排列
在vertical-rl模式下，块级元素水平堆叠，行内元素垂直堆叠
2.2 实际布局中的维度感知
当你开始使用弹性盒或网格布局时，理解书写模式对维度的影响变得尤为重要。
弹性盒影响：
flex-direction: row（默认值）→ 主轴方向为行内方向
horizontal-tb → 主轴是水平方向
vertical-rl → 主轴变为垂直方向
网格布局影响：
grid-template-columns → 定义行内方向上的轨道
grid-template-rows → 定义块级方向上的轨道
当书写模式改变时，列和行的含义会互换
设计优势：这种设计使得布局系统具有了内在的灵活性。你不需要为不同的语言环境重新设计布局结构，只需要改变书写模式，整个布局会自动适应新的方向。这是CSS朝着真正国际化方向迈进的重要一步。
