inline-size

Avatar of Andrés Galante
Andrés Galante

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

inline-size 是一个 逻辑属性,它在写作模式为水平时定义元素的宽度,或在writing-mode 为垂直时定义元素的高度。

.element {
  inline-size: 700px;
  writing-mode: vertical-lr;
}

正如您可能从上面的示例中猜到的那样,writing-mode 属性通过 90 度改变文本和布局流的方向。您可能希望这样做有两个主要原因。

首先,作为设计选择,您可能希望在一个元素上显示垂直文本,例如标题

第二个——可能是最重大的——您可能希望使用inline-size 之类的逻辑属性的原因是适应网站的国际化。许多东亚文字,例如中文、日语和韩语可以横向或纵向书写。使用逻辑属性,我们可以根据用户的写作模式提供元素的正确大小方向。

Jen Simmons 有一篇关于 CSS 写作模式的 文章演示 ,可以更深入地了解 CSS 写作模式。

为什么不能只使用老式的可靠的width 属性?

您可以!但是,如果您担心内容的上下文会根据用户的语言而改变,那么您可能希望使用inline-size 而不是 widthwidth 是一个物理尺寸,因此当写作模式发生改变时,元素会保持其水平宽度大小,当它设置为垂直时,会破坏布局。逻辑属性,如 inline-size ,可以响应这些变化,并在正确方向应用宽度。

例如,如果段落元素使用宽度为 400 像素,当写作模式设置为vertical-lr 时,内容将旋转,改变布局,但该段落将保持 400 像素的宽度,而不是 400 像素的高度。

看到了吗?好吧,inline-size 很聪明!它根据writing-mode 的值从宽度更改为高度。

语法

inline-size: <'width'>
  • 初始值:auto
  • 应用于:heightwidth 相同
  • 继承:
  • 百分比:与相应的物理属性相同
  • 计算值:heightwidth 相同
  • 动画类型:通过计算值类型

/* Length values */
inline-size: 250px;
inline-size: 5rem;


/* Percentage values */
inline-size: 75%;


/* Keyword values */
inline-size: auto;
inline-size: fit-content(5rem);
inline-size: max-content;
inline-size: min-content;


/* Global values */
inline-size: inherit;
inline-size: initial;
inline-size: unset;
  • auto: 元素的内联大小将符合其父元素的大小。
  • fit-content(): 此函数允许容器增长到所需大小,然后使文本换行,有效地将内容钳制到提供的大小值。它可以在网格容器上使用,以及盒子大小,并且虽然 caniuse 显示该函数与 inline-size 有很强的支持,但我们的测试结果不太确定。这可能是由于盒子大小模块第 3 级规范的草案状态
  • max-content: 内在首选宽度,意味着元素将文本尽可能地拉伸,并使盒子与文本一样长。
  • min-content: 内在最小宽度,意味着元素的盒子缩减到其内容的最小尺寸。盒子将是最大文本字符串的大小。

演示

浏览器支持

IEEdgeFirefoxChromeSafariOpera
79+41+5712.1+44+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
85+79+81+12.2+59+
来源:caniuse

请注意,使用以下函数的支持可能与属性的支持不同

更多信息