Phân phối đồng đều các phần tử trong cột

Question

Tôi có một div đơn có tên .wrap trong đó các mục được đặt. Số lượng mục không xác định (.thing) nên được sắp xếp thành bốn cột (xếp chồng lên nhau).

<div class="wrap"> 
    <div class="thing"> thing1 </div> 
    <div class="thing"> thing2 </div> 
    ... 
</div> 

Các cột cần được phân phối đồng đều để không có cột nào trống. Điều này sẽ rất dễ sử dụng:

.wrap { 
    column-count: 4; 
    column-fill: balance; 
} 

Tuy nhiên, column-fill chỉ hoạt động trong Firefox, tôi tin.

Có phương pháp CSS nào khác để đạt được bố cục này trong tất cả các phiên bản trình duyệt gần đây không? Cụ thể, flexbox có thể trợ giúp ở đây không?

Xin lưu ý rằng tôi không thể thêm div phụ để hoạt động dưới dạng cột và không muốn giải pháp JS.

Đây là một fiddle trong đó có bố trí mong muốn trừ phát hành thậm chí → http://jsfiddle.net/bpdtkmmt/

Answer 1

Có, bạn có thể sử dụng Flexbox đây-và nó nên được công việc làm cho hầu hết các phần. Đó là loại hacky và bạn đã từ bỏ sử dụng các quy tắc cột CSS. Có ít biến đổi hơn, vì vậy nếu bạn thêm bất kỳ hàng/cột nào khác, bạn sẽ phải thay đổi giá trị. Để duy trì số lượng cột trên mỗi hàng, bạn cần đặt độ cao cố định hoặc phần trăm cho trình bao bọc. Từ đó, bạn thiết lập hộp chứa bao bì làm thùng chứa flex với quy tắc display: flex và thiết lập nhiều cột bằng cách sử dụng flex-direction: column và flex-wrap: wrap hoặc viết tắt flex-flow: column wrap.

Để đảm bảo mỗi cột có số lượng mục x trong đó, bạn sẽ cần sử dụng quy tắc flex-basis và đặt thành phần trăm của cột bạn muốn lấp đầy. Vì vậy, một cột có 3 mục sẽ có flex-basis: 33.33%. Bạn chỉ ra rằng bạn muốn một vài hàng của 3 mục sau đó một vài hàng của 2 mục, do đó sẽ cần sử dụng bộ chọn nth-child hoặc nth-of-type để thiết lập cơ sở flex mới của 50% bắt đầu từ phần tử thứ 10. Và tất nhiên, bạn sẽ phải thiết lập một tỷ lệ phần trăm cho chiều rộng mà bạn muốn yếu tố điều để mất trên trang (4 hàng = 25%). Để đảm bảo tất cả các yếu tố này là kích thước bằng nhau, bạn cần phải sử dụng

Tuy nhiên, tập trung các văn bản trong một flexbox vẫn còn là một vấn đề và bạn sẽ phải thiết lập những điều như container flex bằng cách thiết lập display-flex hoặc inline-flex với một flex-direction của column, cùng với các thuộc tính text-align và justify-content được đặt thành center.

justify-content: center; 
flex-direction: column; 
text-align: center 

http://jsfiddle.net/hxcnoxx9/10/

CSS này nên giải quyết vấn đề của bạn.

.wrap { 
    height: 180px; 
    background: linear-gradient(to right, tomato 0%, tomato 25%, slategrey 25%, slategrey 50%, tomato 50%, tomato 75%, slategrey 75%); 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
} 

.thing { 
    background: rgba(255, 255, 255, .2); 
    color: #fff; 
    width: 25%; 
    flex-basis: 33.33%; 
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); 
    display: inline-flex; 
    justify-content: center; 
    flex-direction: column; 
    text-align: center; 
} 

.thing:nth-child(1n+10) { 
    flex-basis: 50%; 
}