max-inline-size

Avatar of Andrés Galante
Andrés Galante

DigitalOcean 为您的旅程各个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!

max-inline-size 是 CSS 中一个 逻辑属性,它定义了元素在 writing-mode 为水平时元素的最大宽度,或在 writing-mode 为垂直时元素的最大高度。

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

正如您从上面的示例中可能猜到的,writing-mode 属性会将文本和布局流的方向改变 90 度。

除了创建花哨的设计外,更改方向的主要原因是为了适应网站的国际化。 许多东亚文字,如中文、日语和韩语,可以水平或垂直书写。 使用逻辑属性,我们可以根据用户的书写模式提供元素的正确尺寸方向。

Jen Simmons 有一篇 文章 和一个 演示,更深入地介绍了 CSS 书写模式。

我们不能只使用 max-width 属性吗?

可以! 但如果您不支持 Internet Explorer,那么没有理由不使用 max-inline-sizemax-width 是一个物理尺寸,因此当书写模式改变时,元素会保持其水平宽度大小,在设置为垂直时会破坏布局。 逻辑属性(如 max-inline-size)可以响应这些更改,并在适当的方向应用尺寸。

语法

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

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


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


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


/* Global values */
max-inline-size: inherit;
max-inline-size: initial;
max-inline-size: unset;

演示

writing-mode 设置为 vertical-rl 时,内容会旋转,改变布局。 max-width 盒子的宽度会随着内容旋转。 但 max-inline-size 很聪明! 它会保持其宽度不变,无论 writing-mode 的值如何。 在下面的演示中切换 writing-mode 以查看两者之间的区别。

浏览器支持

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

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

更多信息