流相关的值

在 CSS 中,**流相关值**是相对于元素块和内联轴的定向关键字值。这些值包括 block-startblock-endinline-startinline-endstartend

在 CSS 中,物理属性根据物理方向定义位置,并引用元素的特定边。

另一方面,CSS 逻辑属性根据文档的书写模式和方向而不是视口的物理尺寸来定义样式。逻辑属性相对于内容流,并使用相对于块和内联轴的定向关键字。

块方向

**块轴**指的是定义块布局中元素堆叠顺序的轴。它本质上是内容块(如段落 (<p>)、标题和 div (<div>))在网页上布局的方向。这也被称为**块方向**。在从左到右和从右到左的语言中,块方向是内容流的垂直方向,从上到下。

**block-start** 和 **block-end** 方向分别表示沿块轴的内容的起始边缘结束边缘,或者分别表示“从”和“到”方向,其中 block-start 等效于水平书写模式下的 topblock-end 等效于 bottom

内联方向

**内联轴**垂直于块轴。内联轴表示文本等内联内容在块内流动的方向。这也被称为**内联方向**。在从左到右的书写模式(如英语)中,内联方向是水平的,从左到右。在从右到左的语言(如阿拉伯语和希伯来语)中,内联方向是水平的,从右到左。

**inline-start** 和 **inline-end** 分别表示沿内联轴的内容的起始边缘结束边缘,其中值和属性 inline-startinline-end 等效于水平书写模式下的 leftright 属性和值。它们是否等效于 rightleft 取决于书写方向。例如,inline-start 在从左到右的语言中等效于 left,在从右到左的语言中等效于 right

开始和结束

CSS 属性的效果可以是一维或二维。例如,text-align仅涉及文本的内联方向,因此是一维的。当在上下文中限制为一维时,流相关的关键字缩写为 startend

另请参阅