1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
---
title: flex-shrink
slug: Web/CSS/flex-shrink
tags:
- CSS
- CSS Property
- CSS 属性
- Reference
- 参考
- 弹性盒
translation_of: Web/CSS/flex-shrink
---
<div>{{ CSSRef}}</div>
<p><a href="/zh-CN/docs/Web/CSS">CSS</a> <strong><code>flex-shrink</code></strong> 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。</p>
<pre class="brush: css">flex-shrink: 2;
flex-shrink: 0.6;
/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset</pre>
<p>{{cssinfo}}</p>
<p>更多属性和定义请参见<a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">使用 CSS 弹性盒子</a></p>
<h2 id="语法">语法</h2>
<p><code>flex-shrink</code> 属性只能是一个 <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink$edit#<number>"><number></a>。</code></p>
<h3 id="取值">取值</h3>
<dl>
<dt><code><number</code>></dt>
<dd>负值是不被允许的。参考 {{cssxref("<number>")}}。</dd>
<dt>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
</dt>
</dl>
<h2 id="示例">示例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>the width of content is 500px, flex-basic of flex item is 120px.</p>
<p>A, B, C are flex-shrink:1. D and E are flex-shrink:2</p>
<p>the width of D is not the same as A's</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></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
}</pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample('示例', '500px', '300px', '', 'Web/CSS/flex-shrink')}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th>Specification</th>
<th>Status</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}</td>
<td>{{ Spec2('CSS3 Flexbox') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Edge</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
{{CompatGeckoDesktop("32.0")}}<sup>[2]</sup></td>
<td>21.0{{property_prefix("-webkit")}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
{{CompatVersionUnknown}}</td>
<td>10<sup>[3]</sup></td>
<td>12.10</td>
<td>8.0{{property_prefix("-webkit")}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>Edge</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatGeckoMobile("18.0")}}<sup>[1]</sup><br>
{{CompatGeckoMobile("32.0")}}<sup>[2]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
<td>12.10</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Firefox 仅支持单行 flexbox 直到 Firefox 28版本。To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to <code>true</code>.</p>
<p>In addition to the unprefixed support, Gecko 48.0 {{geckoRelease("48.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p>
<p>[2] 在 Firefox 32 之前，Gecko不能将动画从0开始或停止在0<code>(<a href="https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths">Spec</a>,<a href="http://jsbin.com/zacifexuke/edit?html,css,output">Demo</a>)</code>.。</p>
<p>[3] Internet Explorer 10 使用 <code>0</code> 而不是 <code>1</code> 作为 <code>flex-shrink</code> 属性的初始值。A workaround is to always set an explicit value for <code>flex-shrink</code>. See <a href="https://github.com/philipwalton/flexbugs#6-the-default-flex-value-has-changed">Flexbug #6</a> for more info.</p>
<h2 id="参考">参考</h2>
<ul>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" title="使用 CSS 弹性盒子">使用 CSS 弹性盒子</a></li>
</ul>
|
