概述

min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。

min-width 的值会同时覆盖 max-widthwidth

语法

形式语法: <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-contentmin-contentfit-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 初始定义。

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support112117422
fit-content, max-content, and min-content24 -webkit- No3 -moz- 3 No No No
fill-available24 -webkit- No No No No No
auto214125

34

16 — 226

No12.17 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung 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

文档标签和贡献者

此页面的贡献者: shhider, Sebastianz, hdming, teoli, sunnylost
最后编辑者: shhider,