1. Web
  2. CSS
  3. Reference
  4. Properties
  5. flex-wrap

flex-wrap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Thuộc tính CSS flex-wrap xác định liệu các flex item có bị buộc nằm trên một dòng hay có thể bao sang nhiều dòng. Nếu cho phép bao dòng, nó xác định hướng xếp chồng các dòng.

Try it

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>Item One</div>
    <div>Item Two</div>
    <div>Item Three</div>
    <div>Item Four</div>
    <div>Item Five</div>
    <div>Item Six</div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  width: 80%;
  display: flex;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  width: 60px;
  margin: 10px;
}

Thuộc tính viết tắt flex-flow có thể được dùng để thiết lập cả flex-direction và flex-wrap, xác định trục chính và trục chéo của flex container.

Cú pháp

css
flex-wrap: nowrap; /* Giá trị mặc định */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* Giá trị toàn cục */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: revert-layer;
flex-wrap: unset;

Giá trị

Thuộc tính flex-wrap được xác định bằng một từ khóa duy nhất chọn từ các giá trị dưới đây:

nowrap

Các flex item được sắp xếp trên một dòng duy nhất, có thể khiến flex container bị tràn. Cross-start tương đương với inline-start hoặc block-start, tùy thuộc vào giá trị flex-direction. Đây là giá trị mặc định.

wrap

Các flex item tách thành nhiều dòng. Cross-start tương đương với inline-start hoặc block-start, tùy thuộc vào chế độ viết hiện tại và giá trị flex-direction.

wrap-reverse

Hoạt động giống wrap, nhưng cross-start và cross-end bị đảo ngược.

Định nghĩa hình thức

Initial valuenowrap
Applies toflex containers
Inheritedno
Computed valueas specified
Animation typediscrete

Cú pháp hình thức

flex-wrap = 
  nowrap        |
  wrap          |
  wrap-reverse

Ví dụ

Thiết lập giá trị bao dòng cho flex container

HTML

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

css
/* Common Styles */
.content,
.content1,
.content2 {
  color: white;
  font: 100 24px/100px sans-serif;
  height: 150px;
  width: 897px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 300px;
}
.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;
}

Kết quả

Đặc tả

Specification
CSS Flexible Box Layout Module Level 1
# flex-wrap-property

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content