--- title: flex-wrap slug: Web/CSS/flex-wrap tags: - CSS - CSS Flexible Boxes - CSS Property translation_of: Web/CSS/flex-wrap ---

{{ CSSRef}}

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.

{{cssinfo}}

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 {{cssxref("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

{{csssyntax}}

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ả

{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}

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

Thông số Trang thái Comment
{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }} {{ Spec2('CSS3 Flexbox') }}  

Tương thích

 

{{Compat("css.properties.flex-wrap")}}

 

Xem thêm