概述
min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。
min-width 的值会同时覆盖 max-width 和 width。
语法
形式语法： <length> | <percentage> | auto | max-content | min-content | fit-content | fill-available
/* <length> value */ min-width: 3.5em /* <percentage> value */ min-width: 10% /* Keyword values */ min-width: max-content min-width: min-content min-width: fit-content min-width: fill-available /* Global values */ min-width: inherit min-width: initial min-width: unset
值
<length>- 固定的最小宽度。 查看
<length>了解可用单位。负值会让该声明失效。 <percentage>- 固定的最小宽度表现为包含块宽度的
<percentage>(百分比值)。负值会让该声明失效。
Keyword values
auto- 用于弹性元素的默认最小宽度。相比其他布局中以
0为默认值，auto能为弹性布局指明更合理的默认表现。 max-content- 固有首选宽度。
min-content- 固有最小宽度
fill-available- 包含块的宽度减去水平 margin、border 和 padding。有些浏览器在实现时使用了该关键字的早期名字：
available。 fit-content- 等同于
min(max-content, max(min-content, fill-available).
示例
table { min-width: 75%; }
form { min-width: 0; }
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Intrinsic & Extrinsic Sizing Module Level 3 min-width |
Working Draft | 增加 max-content， min-content， fit-content， 和 fill-available 关键字。CSS3 Box 与 CSS3 Writing Modes 两份草案在某种程度上定义了这些关键字。本草案取代了这些草案。 |
| CSS Flexible Box Layout Module min-width |
Candidate Recommendation | 早期的修订规范 增加了 auto 关键字并将其作为初始值。然而 CSSWG 随后重置了这一变更。直至2013 年 3月 29日，最新的 编辑草案 没有对 min-width 属性做任何修改(也就是说 auto 值已经不被推荐)。 |
| CSS Transitions min-width |
Working Draft | 定义 min-width 为动画属性。 |
| CSS Level 2 (Revision 1) min-width |
Recommendation | 初始定义。 |
浏览器兼容性
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1 | 12 | 11 | 7 | 42 | 2 |
fit-content, max-content, and min-content | 24 -webkit- | No | 3 -moz- 3 | No | No | No |
fill-available | 24 -webkit- | No | No | No | No | No |
auto | 214 | 125 | 34 16 — 226 | No | 12.17 | No |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | ? | ? | Yes | ? | ? | ? | ? |
fit-content, max-content, and min-content | ? | ? | No | ? | ? | ? | ? |
fill-available | ? | ? | No | ? | ? | ? | ? |
auto | ? | ? | ? | ? | ? | ? | ? |
1. CSS 2.1 leaves the behavior of min-width with table undefined. Firefox supports applying min-width to table elements.
2. CSS 2.1 leaves the behavior of min-width with table undefined. Opera supports applying min-width to table elements.
3. Firefox implements the definitions given in CSS3 Basic Box. This defines available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing.
4. Chrome uses auto as the initial value for min-width.
5. Edge uses auto as the initial value for min-width.
6. Firefox 18 and later (until the value was removed), used auto as the initial value for min-width.
7. Opera uses auto as the initial value for min-width.
See also
width,max-width,min-height- The box model,
box-sizing