initial commit

1 files changed, 173 insertions, 0 deletions

diff --git a/files/vi/web/css/flex-wrap/index.html b/files/vi/web/css/flex-wrap/index.html
new file mode 100644
index 0000000000..b033cd54e5
--- /dev/null
+++ b/files/vi/web/css/flex-wrap/index.html
@@ -0,0 +1,173 @@
+---
+title: flex-wrap
+slug: Web/CSS/flex-wrap
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+translation_of: Web/CSS/flex-wrap
+---
+<p>{{ CSSRef}}</p>
+
+<h2 id="Tóm_tắt">Tóm tắt</h2>
+
+<p>Thuộc tính <strong>flex-wrap</strong> xác định xem flex item có bị ép vào một dòng đơn hay có thể được rớt dòng thành nhiều dòng. Nếu việc rớt dòng được chấp nhận, thuộc tính này còn cho phép bạn xác định hướng để rớt dùng.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Xem bài <a href="/en/CSS/Using_CSS_flexible_boxes">sử dụng flexible box</a> để biết thêm thông tin cũng như đọc thêm về các thuộc tính khác.</p>
+
+<h2 id="Cú_pháp">Cú pháp</h2>
+
+<pre class="brush:css">flex-wrap: nowrap;
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* Global values */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+</pre>
+
+<h3 id="Các_giá_trị">Các giá trị</h3>
+
+<p>Thuộc tính <strong>flex-wrap</strong> chấp nhận những giá trị sau đây.:</p>
+
+<dl>
+ <dt><code>nowrap</code></dt>
+ <dd>Các flex item phải nằm trên một dòng đơn, việc này có thể khiến cho các item này tràn ra ngoài container.</dd>
+ <dd><strong>Cross-start</strong> sẽ tương đương với <strong>start</strong> hoặc <strong>before</strong> tùy thuộc vào giá trị của {{cssxref("flex-direction")}}.</dd>
+ <dt><code>wrap</code></dt>
+ <dd>Những flex item sẽ có thể bị tách thành hai dòng nếu như tổng chiều rộng của các item lớn hơn chiều rộng của container. C<strong>ross-start</strong> sẽ tương đương với <strong>start</strong> hoặc <strong>before</strong> tùy thuộc vào giá trị của <code>flex-direction</code> và <strong>cross-end</strong> sẽ có giá trị ngược lại với <strong>cross-start</strong>.</dd>
+ <dt><code>wrap-reverse</code></dt>
+ <dd>Nó giống như <code>wrap</code> nhưng <strong>cross-start</strong> và <strong>cross-end</strong> thì có giá trị ngược lại.</dd>
+ <dt>
+ <h3 id="Cú_pháp_chính_quy">Cú pháp chính quy</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ví_dụ">Ví dụ</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&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;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* 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: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -moz-flex;
+    display: -webkit-flex;
+    display: flex;
+    flex-wrap: wrap;
+}
+.content1 {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -moz-flex;
+    display: -webkit-flex;
+    display: flex;
+    flex-wrap: nowrap;
+}
+.content2 {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -moz-flex;
+    display: -webkit-flex;
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+</pre>
+</div>
+
+<h3 id="Kết_quả">Kết quả</h3>
+
+<p>{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}</p>
+
+<h2 id="Các_thông_số_kỹ_thuật">Các thông số kỹ thuật</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Thông số</th>
+   <th>Trang thái</th>
+   <th>Comment</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="Tương_thích">Tương thích</h2>
+
+<p> </p>
+
+<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.flex-wrap")}}</p>
+
+<p> </p>
+
+<h2 id="Xem_thêm">Xem thêm</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Sử dụng flexible boxes</a></li>
+</ul>