流相对值
在 CSS 中,流相对值是相对于元素的块轴和内联轴的定向关键字值。这些值包括 block-start、block-end、inline-start、inline-end、start 和 end。
在 CSS 中,物理属性根据物理方向定义位置,并引用元素的特定侧面。
另一方面,CSS 逻辑属性根据文档的书写模式和方向而非视口的物理尺寸定义样式。逻辑属性相对于内容流,并使用相对于块轴和内联轴的定向关键字。
块方向
块轴是指在块布局中定义元素堆叠顺序的轴。它本质上是网页上内容块(如段落 (<p>)、标题和 div (<div>))排列的方向。这也被称为块方向。在从左到右和从右到左的语言中,块方向是内容流的垂直方向,从上到下。
块开始和块结束方向分别表示沿块轴的内容的起始边缘和结束边缘,或“从”和“到”方向,其中 block-start 相当于水平书写模式中的 top,block-end 相当于 bottom。
行内方向
内联轴垂直于块轴。内联轴表示文本等内联内容在块内流动的方向。这也被称为内联方向。在从左到右的书写模式中,如英语,内联方向是水平的,从左到右。在从右到左的语言中,如阿拉伯语和希伯来语,内联方向是水平的,从右到左。
内联开始和内联结束分别表示沿内联轴的内容的起始边缘和结束边缘,其中值和属性 inline-start 和 inline-end 相当于水平书写模式中的 left 和 right 属性和值。它们是等同于 right 还是 left 取决于书写方向。例如,在从左到右的语言中,inline-start 等同于 left;在从右到左的语言中,它等同于 right。
开始和结束
CSS 属性的效果可以是一维或二维的。例如,text-align 只涉及文本的内联方向,因此是一维的。当在上下文中限制为一维时,流相关关键字缩写为 start 或 end。