min-width

概述

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	初始定义。

浏览器兼容性

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`min-width`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1 Notes Full support 1 Notes Notes CSS 2.1 leaves the behavior of `min-width` with `table` undefined. Firefox supports applying `min-width` to `table` elements.	IE Full support 7	Opera Full support 4 Notes Full support 4 Notes Notes CSS 2.1 leaves the behavior of `min-width` with `table` undefined. Opera supports applying `min-width` to `table` elements.	Safari Full support 1	WebView Android Full support 4.4	Chrome Android Full support 18	Firefox Android Full support 4 Notes Full support 4 Notes Notes CSS 2.1 leaves the behavior of `min-width` with `table` undefined. Firefox supports applying `min-width` to `table` elements.	Opera Android Full support Yes	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
`auto`	Chrome Full support 21 Notes Full support 21 Notes Notes Chrome uses `auto` as the initial value for `min-width`.	Edge Full support 12 Notes Full support 12 Notes Notes Edge uses `auto` as the initial value for `min-width`.	Firefox Full support 34 Full support 34 No support 16 — 22 Notes Notes Firefox 18 and later (until the value was removed), used `auto` as the initial value for `min-width`.	IE No support No	Opera Full support 12.1 Notes Full support 12.1 Notes Notes Opera uses `auto` as the initial value for `min-width`.	Safari No support No	WebView Android Full support 37 Notes Full support 37 Notes Notes Chrome uses `auto` as the initial value for `min-width`.	Chrome Android Full support 25 Notes Full support 25 Notes Notes Chrome uses `auto` as the initial value for `min-width`.	Firefox Android Full support 34 Full support 34 No support 16 — 22 Notes Notes Firefox 18 and later (until the value was removed), used `auto` as the initial value for `min-width`.	Opera Android ?	Safari iOS No support No	Samsung Internet Android Full support 1.5 Notes Full support 1.5 Notes Notes Samsung Internet uses `auto` as the initial value for `min-width`.
`fit-content`	Chrome Full support 46 Full support 46 Full support 25 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Edge No support No	Firefox Full support 3 Prefixed Notes Full support 3 Prefixed Notes Prefixed Implemented with the vendor prefix: -moz- Notes 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.	IE No support No	Opera Full support 15 Prefixed Full support 15 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari Full support 11 Full support 11 Full support 6.1 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	WebView Android Full support 46 Full support 46 Full support ≤37 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Chrome Android Full support 46	Firefox Android Full support 4 Prefixed Notes Full support 4 Prefixed Notes Prefixed Implemented with the vendor prefix: -moz- Notes 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.	Opera Android ?	Safari iOS Full support 11 Full support 11 Full support 7 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 5.0 Alternate Name Full support 5.0 Alternate Name Alternate Name Uses the non-standard name: `-webkit-fill-available`
`max-content`	Chrome Full support 46 Full support 46 Full support 25 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Edge No support No	Firefox Full support 66 Full support 66 Full support 3 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE No support No	Opera Full support 15 Prefixed Full support 15 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari Full support 11 Full support 11 Full support 2 Alternate Name Alternate Name Uses the non-standard name: `intrinsic`	WebView Android Full support 46 Full support 46 Full support ≤37 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Chrome Android Full support 46	Firefox Android Full support 66 Full support 66 Full support 4 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android ?	Safari iOS Full support 11 Full support 11 Full support 1 Alternate Name Alternate Name Uses the non-standard name: `intrinsic`	Samsung Internet Android Full support 5.0
`min-content`	Chrome Full support 46 Full support 46 Full support 25 Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 25 Alternate Name Alternate Name Uses the non-standard name: `min-intrinsic`	Edge No support No	Firefox Full support 66 Full support 66 Full support 3 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE No support No	Opera Full support 44	Safari Full support 11 Full support 11 Full support 2 Alternate Name Alternate Name Uses the non-standard name: `min-intrinsic`	WebView Android Full support 46 Full support 46 Full support ≤37 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Chrome Android Full support 46	Firefox Android Full support 66 Full support 66 Full support 4 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android Full support 43	Safari iOS Full support 11 Full support 11 Full support 1 Alternate Name Alternate Name Uses the non-standard name: `min-intrinsic`	Samsung Internet Android Full support 5.0
`stretch` Experimental	Chrome Full support 22 Alternate Name Full support 22 Alternate Name Alternate Name Uses the non-standard name: `-webkit-fill-available`	Edge No support No	Firefox No support No	IE No support No	Opera Full support 15 Alternate Name Full support 15 Alternate Name Alternate Name Uses the non-standard name: `-webkit-fill-available`	Safari No support No	WebView Android Full support 4.4 Alternate Name Full support 4.4 Alternate Name Alternate Name Uses the non-standard name: `-webkit-fill-available`	Chrome Android Full support 25 Alternate Name Full support 25 Alternate Name Alternate Name Uses the non-standard name: `-webkit-fill-available`	Firefox Android No support No	Opera Android Full support 14 Alternate Name Full support 14 Alternate Name Alternate Name Uses the non-standard name: `-webkit-fill-available`	Safari iOS No support No	Samsung Internet Android Full support 1.5 Alternate Name Full support 1.5 Alternate Name Alternate Name Uses the non-standard name: `-webkit-fill-available`

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.: Experimental. Expect behavior to change in the future.
See implementation notes.: See implementation notes.
Uses a non-standard name.: Uses a non-standard name.
Requires a vendor prefix or different name for use.: Requires a vendor prefix or different name for use.

min-width

概述

语法

值

Keyword values

示例

规范

浏览器兼容性

Legend

See also

学习 Web 开发的最佳实践