Hãy xem this exampleLuôn quấn ít nhất hai mục có flexbox
Nó có một container flexbox với flex-flow: row wrap; để bọc tất cả các mặt hàng. Đây là hầu như những gì tôi muốn.
Khi nó bắt đầu quấn, số mục 6 kết thúc tốt đẹp vào dòng thứ hai:
1 2 3 4 5
6
Nhưng tôi luôn luôn muốn quấn ít nhất hai mục khi nó bắt đầu quấn, do đó bạn sẽ không bao giờ có một mục đơn trên một dòng:
1 2 3 4
5 6
tôi đã tìm ra một cách để làm điều đó cho Elements inline , tuy nhiên, nó sẽ hoạt động inconsistently across browsers khi được sử dụng với các khối nội tuyến. Vẫn không phải là một giải pháp, nhưng có lẽ ai đó có thể tìm ra cách để làm cho nó hoạt động với các yếu tố khối nội tuyến.
.item {
display: inline;
}
.item::before {
content: ' ';
font-size: 0;
}
.item:last-child::before {
content: '';
}
Dưới đây là Fiddle khi đang hoạt động.
Đó là một giải pháp rất thú vị. Không chắc chắn nếu nó làm việc cho trường hợp cũ của tôi (vì nó đã được 2 năm trước đây), nhưng nó làm những gì tôi yêu cầu. –
dưới đây là một cách tiếp cận mà nên làm việc theo chế độ rộng của nguyên tố này là cố định
Giả sử chiều rộng là 50px:
.container {
display: flex;
flex-flow: row wrap;
}
.flex-item: {
width: 50px;
display: block;
}
.flex-item:nth-child(even) {
translateX(100%)
margin-left: -100px;
}
.flex-item:nth-child(odd) {
margin-right: 50px;
}
Bí quyết về cơ bản là di chuyển "dấu chân" của mọi phần tử thứ 2 vào tiền thân của nó (lề âm), vẫn hiển thị ở vị trí ban đầu (dịch) và có tiền thân ăn không gian còn lại) với mục đích phá vỡ hàng.
Bạn sẽ làm gì nếu phần tử sẽ có chiều rộng thay đổi? Là giải pháp duy nhất để phát hiện chiều rộng với JS? – Gleasonator
Trong khi không phải là giải pháp thanh lịch nhất, bạn có thể quấn hai yếu tố cuối cùng trong flexbox khác:
<html>
<head>
<style>
.flex {
display: flex;
flex-wrap: wrap;
}
.flex > div {
flex: 1 0 auto;
padding: 20px;
text-align: center;
}
.flex .flex {
padding: 0;
flex-grow: 2;
}
</style>
</head>
<body>
<div class="flex">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="flex">
<div>5</div>
<div>6</div>
</div>
</div>
</body>
</html>
Xem một cây bút ở đây: https://codepen.io/anon/pen/prodVd
Loại đó loại bỏ toàn bộ phần linh hoạt khỏi flexbox –
Bạn có thể cố gắng tiêm hộp chứa flex thứ hai bằng js. Như tôi đã nói, không thanh lịch, nhưng có vẻ như nó hoạt động. Mặc dù vậy, tôi rất muốn thấy một giải pháp CSS tinh khiết hơn. – Rolf
Thực tế thú vị: trong kiểu chữ, khi từ cuối cùng của một câu được bọc vào dòng kế tiếp, nó được gọi là "trẻ mồ côi". Trong tiếng Hà Lan, đây là "hoerenjong." Đây là vấn đề cơ bản, phải không? –
Vâng, đó là vấn đề. Tôi biết CSS có trẻ mồ côi, nhưng điều đó chỉ hoạt động trên văn bản như bạn đã nói. Sẽ là tuyệt vời nếu nó sẽ làm việc trên các khối flex. PS. Thực tế tốt đẹp về từ Hà Lan, không biết điều đó. Chúng tôi thật kỳ lạ. –
Tôi có thể nhớ điều này đã được thảo luận cho một cấp độ tương lai trong một số danh sách gửi thư (không tìm thấy liên kết) và cho đến nay tôi không thể thấy tùy chọn điều chỉnh gói với tùy chọn/giá trị, thuộc tính flexbox hiện tại. – helloanselm