initial commit

1 files changed, 173 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/flex-shrink/index.html b/files/zh-cn/web/css/flex-shrink/index.html
new file mode 100644
index 0000000000..1f95357a2b
--- /dev/null
+++ b/files/zh-cn/web/css/flex-shrink/index.html
@@ -0,0 +1,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#&lt;number>">&lt;number&gt;</a>。</code></p>
+
+<h3 id="取值">取值</h3>
+
+<dl>
+ <dt><code>&lt;number</code>&gt;</dt>
+ <dd>负值是不被允许的。参考 {{cssxref("&lt;number&gt;")}}。</dd>
+ <dt>
+ <h3 id="Formal_syntax">Formal syntax</h3>
+
+ <pre>{{csssyntax}}</pre>
+ </dt>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;the width of content is 500px, flex-basic of flex item is 120px.&lt;/p&gt;
+&lt;p&gt;A, B, C are flex-shrink:1. D and E are flex-shrink:2&lt;/p&gt;
+&lt;p&gt;the width of D is not the same as A's&lt;/p&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+&lt;/div&gt;</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>