MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

flex-wrap

This translation is incomplete. Please help translate this article from English.

Tóm tắt

Thuộc tính flex-wrap 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.

Initial valuenowrap
Applies toflex containers
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Xem bài sử dụng flexible box để biết thêm thông tin cũng như đọc thêm về các thuộc tính khác.

Cú pháp

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;

Các giá trị

Thuộc tính flex-wrap chấp nhận những giá trị sau đây.:

nowrap
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.
Cross-start sẽ tương đương với start hoặc before tùy thuộc vào giá trị của flex-direction.
wrap
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. Cross-start sẽ tương đương với start hoặc before tùy thuộc vào giá trị của flex-direction và cross-end sẽ có giá trị ngược lại với cross-start.
wrap-reverse
Nó giống như wrap nhưng cross-start và cross-end thì có giá trị ngược lại.

Cú pháp chính quy

nowrap | wrap | wrap-reverse

Ví dụ

HTML

<h4>This is an example for flex-wrap:wrap </h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap </h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse </h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

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;
}

Kết quả

Các thông số kỹ thuật

Thông số Trang thái Comment
CSS Flexible Box Layout Module
The definition of 'flex-wrap' in that specification.
Candidate Recommendation  

Tương thích

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 28.0[1] 21.0-webkit 11.0-ms 12.10 6.1-webkit
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support 28.0[1] 4.4 11.0 12.10 7.0-webkit

[1] In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

Xem thêm

Document Tags and Contributors

 Contributors to this page: nguyenvanduocit
 Last updated by: nguyenvanduocit,