Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh.

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

 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 29
Full support 29
Full support 21
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 28IE Partial support 11
Notes
Partial support 11
Notes
Notes Partial support due to large number of bugs present. See Flexbugs.
Opera Full support 17Safari Full support 9WebView Android Full support 4.4
Full support 4.4
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Chrome Android Full support 29
Full support 29
Full support 25
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Mobile Full support 12Firefox Android Full support 52Opera Android Full support 12.1Safari iOS Full support 9.2Samsung Internet Android ?

Legend

Full support  
Full support
Partial support  
Partial support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

 

Xem thêm

Document Tags and Contributors

Những người đóng góp cho trang này: fscholz, nguyenvanduocit
Cập nhật lần cuối bởi: fscholz,