Giải pháp đơn giản và đáng tin cậy nhất là chèn các vật phẩm flex vào đúng chỗ. Nếu chúng đủ rộng ( width: 100%), chúng sẽ buộc ngắt dòng.
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
width: 100px;
background: gold;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px
}
.item:nth-child(4n - 1) {
background: silver;
}
.line-break {
width: 100%;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="line-break"></div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="line-break"></div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="line-break"></div>
<div class="item">10</div>
</div>
Nhưng đó là xấu xí và không ngữ nghĩa. Thay vào đó, chúng ta có thể tạo các phần tử giả bên trong thùng chứa flex và sử dụng orderđể di chuyển chúng đến đúng nơi.
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
width: 100px;
background: gold;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px
}
.item:nth-child(3n) {
background: silver;
}
.container::before, .container::after {
content: '';
width: 100%;
order: 1;
}
.item:nth-child(n + 4) {
order: 1;
}
.item:nth-child(n + 7) {
order: 2;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Nhưng có một giới hạn: container flex chỉ có thể có một ::beforevà một ::afterphần tử giả. Điều đó có nghĩa là bạn chỉ có thể buộc 2 ngắt dòng.
Để giải quyết điều đó, bạn có thể tạo các phần tử giả bên trong các mục flex thay vì trong hộp chứa flex. Bằng cách này, bạn sẽ không bị giới hạn ở 2. Nhưng các phần tử giả đó sẽ không phải là mục linh hoạt, vì vậy chúng sẽ không thể buộc ngắt dòng.
Nhưng may mắn thay, CSS Display L3 đã giới thiệu display: contents(hiện chỉ được Firefox 37 hỗ trợ):
Bản thân phần tử không tạo ra bất kỳ hộp nào, nhưng phần tử con và phần tử giả của nó vẫn tạo các hộp như bình thường. Đối với mục đích tạo và bố trí hộp, phần tử phải được xử lý như thể nó đã được thay thế bằng phần tử con và phần tử giả trong cây tài liệu.
Vì vậy, bạn có thể áp dụng display: contentscho trẻ em của hộp chứa flex và bọc nội dung của từng cái bên trong một lớp bọc bổ sung. Sau đó, các mục flex sẽ là các hàm bao bổ sung và các phần tử giả của trẻ em.
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
display: contents;
}
.item > div {
width: 100px;
background: gold;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px;
}
.item:nth-child(3n) > div {
background: silver;
}
.item:nth-child(3n)::after {
content: '';
width: 100%;
}
<div class="container">
<div class="item"><div>1</div></div>
<div class="item"><div>2</div></div>
<div class="item"><div>3</div></div>
<div class="item"><div>4</div></div>
<div class="item"><div>5</div></div>
<div class="item"><div>6</div></div>
<div class="item"><div>7</div></div>
<div class="item"><div>8</div></div>
<div class="item"><div>9</div></div>
<div class="item"><div>10</div></div>
</div>
Ngoài ra, theo Phân mảnh Flex Layout và CSS Phân mảnh , Flexbox phép buộc phải phá vỡ bằng cách sử dụng break-before, break-afterhoặc CSS 2.1 bí danh của họ:
.item:nth-child(3n) {
page-break-after: always; /* CSS 2.1 syntax */
break-after: always; /* New syntax */
}
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
width: 100px;
background: gold;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px
}
.item:nth-child(3n) {
page-break-after: always;
background: silver;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
Ngắt dòng cưỡng bức trong flexbox chưa được hỗ trợ rộng rãi, nhưng nó hoạt động trên Firefox.
