CSS | min-inline-size 属性

简介

min-inline-size 属性可以设置元素的最小内联尺寸（inline size）。如果元素的内联尺寸小于该属性所设定的尺寸，那么元素将会根据盒子尺寸扩展，以匹配所设置的最小内联尺寸。

该属性的应用范围包括行内级（inline-level）和块级（block-level）元素。

语法

min-inline-size: auto | <length> | <percentage> | min-content | max-content | fit-content;

• auto：使用元素的默认最小尺寸。
• <length>：使用指定的长度（例如 10px）。
• <percentage>：使用指定的百分比（例如 50%）。
• min-content：元素的最小内联尺寸由其内容决定。
• max-content：元素的最小内联尺寸与其内容的最长尺寸一致。
• fit-content：元素的最小内联尺寸被设置为与其内容的最小长度一致，但不超过所指定的最大尺寸。

示例

例子 1

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

该代码片段设置 div 元素的最小内联尺寸为 200px，即使元素的内容很少，也会被扩展以达到最小内联尺寸。

例子 2

p {
  min-inline-size: max-content;
}

该代码将设置 p 元素的最小内联尺寸与其内容的最长尺寸一致，以便元素的内联尺寸能够容纳所有的内容。

兼容性

该属性的兼容性有待进一步检测和测试。

总结

• min-inline-size 属性可以设置元素的最小内联尺寸，以便能够控制元素的表现方式。
• 除长度和百分比之外，该属性还支持三种特殊值（min-content、max-content 和 fit-content）。
• 使用该属性可以提高元素的可访问性和可维护性。