initial commit

1 files changed, 193 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/flex-wrap/index.html b/files/zh-cn/web/css/flex-wrap/index.html
new file mode 100644
index 0000000000..7fc3f1b342
--- /dev/null
+++ b/files/zh-cn/web/css/flex-wrap/index.html
@@ -0,0 +1,193 @@
+---
+title: flex-wrap
+slug: Web/CSS/flex-wrap
+tags:
+  - CSS3
+  - Default value
+  - Flex
+  - flex-wrap
+translation_of: Web/CSS/flex-wrap
+---
+<p>{{ CSSRef("CSS Flexible Boxes") }}</p>
+
+<h2 id="概述">概述</h2>
+
+<p><a href="/zh-CN/docs/CSS" title="CSS">CSS</a> <strong><code>flex-wrap</code></strong> 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。</p>
+
+<p>{{cssinfo}}</p>
+
+<p>参考 <a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" title="使用 CSS 弹性盒子">使用 CSS 弹性盒子</a> 查看更多的属性和信息</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush:css">flex-wrap: nowrap;  /* Default value */
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* Global values */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+</pre>
+
+<h3 id="取值">取值</h3>
+
+<p>下面这些值是可以接受的:</p>
+
+<dl>
+ <dt><code>nowrap</code></dt>
+ <dd>flex 的元素被摆放到到一行，这可能导致溢出 flex 容器。 <strong>cross-start</strong>  会根据 {{cssxref("flex-direction")}} 的值 相当于 <strong>start</strong> 或 <strong>before</strong>。</dd>
+ <dt><code>wrap</code></dt>
+ <dd>flex 元素 被打断到多个行中。<strong>cross-start</strong> 会根据 {{cssxref("flex-direction")}} 的值选择等于<strong>start</strong> 或<strong>before</strong>。<strong>cross-end</strong> 为确定的 <strong>cross-start</strong> 的另一端。</dd>
+ <dt><code>wrap-reverse</code></dt>
+ <dd>和 wrap 的行为一样，但是 <strong>cross-start</strong> 和 <strong>cross-end </strong>互换。</dd>
+ <dt>
+ <h3 id="语法格式">语法格式</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="例子">例子</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre><code>&lt;h4&gt;This is an example for flex-wrap:wrap &lt;/h4&gt;
+&lt;div class="content"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;This is an example for flex-wrap:nowrap &lt;/h4&gt;
+&lt;div class="content1"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;This is an example for flex-wrap:wrap-reverse &lt;/h4&gt;
+&lt;div class="content2"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre><code>/* Common Styles */
+.content,
+.content1,
+.content2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.content div,
+.content1 div,
+.content2 div {
+    height: 50%;
+    width: 50%;
+}
+.red {
+    background: orangered;
+}
+.green {
+    background: yellowgreen;
+}
+.blue {
+    background: steelblue;
+}
+
+/* Flexbox Styles */
+.content {
+    display: flex;
+    flex-wrap: wrap;
+}
+.content1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.content2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}</code></pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>规范</th>
+   <th>状态</th>
+   <th>备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>                    </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<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>28.0</td>
+   <td>29.0</td>
+   <td>12.0</td>
+   <td>11.0<sup>[1]</sup></td>
+   <td>17.0</td>
+   <td>9.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox for Android (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>52.0</td>
+   <td>4.4</td>
+   <td>12.0</td>
+   <td>11.0</td>
+   <td>12.1</td>
+   <td>9.2</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" title="使用 CSS 弹性盒子">使用 CSS 弹性盒<br>
+  子</a></li>
+</ul>