flex-shrink

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink .

In use, flex-shrink is used alongside the other flex properties flex-grow and flex-basis , and normally defined using the flex shorthand.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

句法

/* <number> values */
flex-shrink: 2;
flex-shrink: 0.6;
/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;

flex-shrink property is specified as a single <number> .

值

<number>: 见 <number> . Negative values are invalid. Defaults to 1.

形式定义

初始值	`1`
适用于	flex items, including in-flow pseudo-elements
继承	no
计算值	如指定
动画类型	a number

形式句法

<number>

范例

Setting flex item shrink factor

HTML

<p>The width of content is 500px; the flex-basis of the flex items is 120px.</p>
<p>A, B, C have flex-shrink:1 set. D and E have flex-shrink:2 set</p>
<p>The width of D and E is less than the others.</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>

CSS

#content {
  display: flex;
  width: 500px;
}
#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0,0,0,.2);
}
.box {
  flex-shrink: 1;
}
.box1 {
  flex-shrink: 2;
}

结果

规范

规范	状态	注释
CSS Flexible Box Layout Module The definition of 'flex-shrink' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 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
`flex-shrink`	Chrome 完整支持 29	Edge 完整支持 12	Firefox 完整支持 20 注意事项完整支持 20 注意事项注意事项 Since Firefox 28, multi-line flexbox is supported. 注意事项 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0` . 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 完整支持 Prefixed Implemented with the vendor prefix: -webkit- Disabled `layout.css.prefixes.webkit` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. 不支持 18 — 20 Disabled Disabled ). To change preferences in Firefox, visit	IE 完整支持 10 注意事项完整支持 10 注意事项注意事项 Internet Explorer 10 uses `0` 而不是 `1` as the initial value for the `flex-shrink` property. A workaround is to always set an explicit value for `flex-shrink` 。见 Flexbug #6 for more info.	Opera 完整支持 12.1	Safari 完整支持 9	WebView Android 完整支持 4.4	Chrome Android 完整支持 29	Firefox Android 完整支持 20 注意事项完整支持 20 注意事项注意事项 Since Firefox 28, multi-line flexbox is supported. 注意事项 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0` . 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 完整支持 Prefixed Implemented with the vendor prefix: -webkit- Disabled `layout.css.prefixes.webkit` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. 不支持 18 — 20 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 12.1	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 2.0

图例

完整支持
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。

另请参阅

CSS Flexbox Guide: Basic Concepts of Flexbox
CSS Flexbox Guide: Controlling Ratios of flex items along the main axis

元数据

最后修改： Aug 14, 2020

CSS
CSS 参考
CSS 的灵活框布局
指南
特性
1. flex
2. flex-basis
3. flex-direction
4. flex-flow
5. flex-grow
6. flex-shrink
7. flex-wrap
8. order

在此页

句法

值