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-size
。 max-width
是一个物理尺寸,因此当书写模式改变时,元素会保持其水平宽度大小,在设置为垂直时会破坏布局。 逻辑属性(如 max-inline-size
)可以响应这些更改,并在适当的方向应用尺寸。
语法
max-inline-size: <'width'>;
- 初始值:
auto
- 应用于:与
height
和width
相同 - 继承:否
- 百分比:与相应的物理属性相同
- 计算值:与
height
和width
相同 - 动画类型:按计算值类型
值
/* 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
以查看两者之间的区别。
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 79+ | 41+ | 57 | 12.1+ | 44+ |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
85+ | 79+ | 81+ | 12.2+ | 59+ |
请注意,使用以下函数的支持可能与属性支持不同