Bố cục nề ngang với CSS hộp thư chỉ

Question

Tôi đang cố gắng tạo bố cục khối ngang chỉ sử dụng CSS và flexbox. Vấn đề tôi đang gặp là có những khoảng trống theo chiều dọc giữa các phần tử, mà không sử dụng align-left: stretch; là nó có thể đóng các khoảng trống?

.card-container { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    align-items: flex-start; 
} 


.card { 
    width: 25%; 
    flex: 1 0 auto; 
} 

full codepen here

Answer 1

Dưới đây là một tùy chọn sử dụng các cột được bao bọc, nhưng nó đòi hỏi chiều cao cố định.

.card-container { 
    display: flex; 
    flex-flow: column wrap; 
    height:100vh; 
    align-items: center; 
    background-color: #888; 
} 

Một lựa chọn tốt hơn cho bố trí CSS nề là sử dụng cột, một ví dụ là về bài viết trên blog này http://w3bits.com/css-masonry/

.masonry { /* Masonry container */ 
    -moz-column-count: 4; 
    -webkit-column-count: 4; 
    column-count: 4; 
    -moz-column-gap: 1em; 
    -webkit-column-gap: 1em; 
    column-gap: 1em; 
} 

.item { /* Masonry bricks or child elements */ 
    background-color: #eee; 
    display: inline-block; 
    margin: 0 0 1em; 
    width: 100%; 
} 

Answer 2

Flex hộp bọc kết thúc tốt đẹp các yếu tố tràn vào một hàng mới. Hàng mới này có, giống như hàng trước đó, chiều cao của con flex cao nhất trong đó. Nó sẽ không cho phép các phần tử trong hàng đi ra ngoài ranh giới các hàng đó.

Rất tiếc, không bạn không thể đóng các khoảng trống theo chiều dọc bằng flexbox.