CSS min-inline-size 属性

定义和用法

min-inline-size 属性指定元素在行内方向上的最小尺寸。

如果内容在行内方向上的尺寸小于最小尺寸，则将应用 min-inline-size 属性值。

如果内容在行内方向上的尺寸大于最小尺寸，则 min-inline-size 属性值不起作用。

注意：相关的 CSS 属性 writing-mode 定义了行内方向，这会影响 min-inline-size 属性的结果。对于英文页面，块方向是向下，而行内方向是从左到右。

CSS min-inline-size 属性与 CSS 属性 min-height 和 min-width 非常相似，但 min-inline-size 属性依赖于行内方向。

实例

例子 1

将 <div> 元素在行内方向上的最小尺寸设置为 200 像素：

div {
  min-inline-size: 200px;
}

亲自试一试

例子 2：书写模式

将 <div> 元素的 writing-mode 属性值设置为 vertical-rl 时，行内方向从侧向变为向下，这会影响 min-inline-size 属性的工作方式：

div {
  min-inline-size: 260px;
  writing-mode: vertical-rl;
}

亲自试一试

例子 3：min-inline-size 与 inline-size

观察一个 inline-size 为 200px 的 <div> 元素和另一个 min-inline-size 为 200px 的 <div> 元素在内容尺寸变化时的不同表现：

#div1 {
  min-inline-size: 200px;
}
#div2 {
  inline-size: 200px;
}

亲自试一试

CSS 语法

min-inline-size: auto|length|initial|inherit;

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

参考：CSS inline-size 属性

参考：CSS max-inline-size 属性

参考：CSS min-height 属性

参考：CSS min-width 属性

参考：CSS writing-mode 属性