Làm thế nào để sử dụng flexbox css3 để tạo bố cục nhiều cột mà không cần mở rộng theo chiều dọc?

Question

Tôi đang chơi với flexbox của css3 trong Chrome (không cần phải lo lắng về trình duyệt chéo cho điều này). Tôi đang có một thời gian khó khăn thuyết phục nó để đặt ra nội dung của tôi theo cách tôi muốn. Dưới đây là một phác thảo của mục tiêu của tôi:

Dưới đây là một jsFiddle của nỗ lực của tôi: http://jsfiddle.net/Yht4V/2/ Điều này dường như làm việc tốt, ngoại trừ mỗi .group sẽ mở rộng chiều cao của nó chứ không phải là tạo ra nhiều cột.

Tôi đang sử dụng flexbox phổ biến ở đây. Các body đưa ra theo chiều dọc, với #content div lấy chiều cao còn lại của trang. Mỗi .group được bố trí theo chiều ngang. Cuối cùng, mỗi .item được đặt trong một số .group theo chiều dọc với gói.

Thật không may, mỗi .group kết thúc bằng một cột đơn bằng cách mở rộng chiều cao #content, làm cho thanh cuộn dọc (không mong muốn). Nếu tôi đặt chiều cao của mỗi .group thành kích thước pixel cố định, các mục sẽ vỡ ra thành nhiều cột, nhưng điều này sẽ đánh bại tính lưu động của flexbox. Dưới đây là những gì nó trông giống như với chiều cao cố định: http://jsfiddle.net/Yht4V/3/

Vì vậy, làm thế nào tôi có thể nhận được #content div để không mở rộng theo chiều dọc vì mọi thứ được quản lý với flexbox mà không đặt độ cao cố định? Tôi đã mong đợi flexbox để kích hoạt thêm cột thay vì mở rộng chiều cao của cha mẹ của nó và gây ra một thanh cuộn.

Answer 1

Từ những gì tôi đã thấy với triển khai Chrome và Opera cho Flexbox, một cột flex-direction yêu cầu hạn chế chiều cao của phần tử, nếu không nó sẽ tiếp tục mở rộng theo chiều dọc. Nó không phải là một giá trị cố định, nó có thể là một tỷ lệ phần trăm.

Điều đó nói rằng, bố cục bạn muốn cho các thành phần .group cũng có thể đạt được bằng cách sử dụng mô-đun Cột CSS. Dòng chảy của các phần tử sẽ tương tự như định hướng của cột flexbox, nhưng nó sẽ tạo ra các cột miễn là có đủ chiều rộng cho chúng, bất kể tài liệu là bao lâu.

http://jsfiddle.net/Yht4V/8/ (bạn sẽ phải xin lỗi thiếu tiền tố)

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    display: flex; 
    flex-flow: column nowrap; 
} 

h1 { 
    padding: 1em; 
} 

#content { 
    padding: 10px; 
    background-color: #eee; 
    display: flex; 
    flex-grow: 1; 
} 

#content > .group { 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid #cfcfcf; 
    background-color: #ddd; 
    flex: 1 1 auto; 
} 

#content > .group:first-child { 
    columns: 10em; 
    flex-grow: 2;  
} 

#content > .group .item { 
    margin: 10px; 
    padding: 10px; 
    background-color: #aaa; 
    break-inside: avoid; 
} 

#content > .group .item:first-child { 
    margin-top: 0; 
} 

Rời nó như là một loạt các flexboxes lồng nhau, đây là khoảng gần như tôi có thể nhận được nó:

http://jsfiddle.net/Yht4V/9/ (một lần nữa, không có tiền tố)

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    display: flex; 
    flex-flow: column nowrap; 
} 

h1 { 
    padding: 1em; 
} 

#content { 
    padding: 10px; 
    background-color: #eee; 
    display: flex; 
    flex: 1 1 auto; 
    height: 100%; 
    width: 100%; 
} 

#content > .group { 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid #cfcfcf; 
    background-color: #ddd; 

    display: flex; 
    flex-flow: column wrap; 
    flex: 1 1 30%; 
    max-height: 100%; 
} 

#content > .group .item { 
    margin: 10px; 
    padding: 10px; 
    background-color: #aaa; 
} 

Answer 2

Thay thế sau trong css của bạn - display: -webkit-flex ; cho các mục sau - display: -webkit-box;

này làm việc rất tốt cho tôi :-)