Cột Flexbox chồng lên nhau

Question

Tôi đang cố gắng bắt chước chế độ xem danh sách được nhóm theo WinJS bằng cách sử dụng flexbox. Tôi nhận được gần (tôi nghĩ) ngoại trừ các cột chồng lên nhau khi thay đổi kích thước.

http://jsfiddle.net/w8ts4Lnx/5/

Tôi muốn các mục để ở lại bên trong nhóm và để cho nhóm phát triển theo chiều ngang.

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

h1 { 
    padding: 1em; 
} 

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

#content > .group { 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid #cfcfcf; 
    background-color: #ddd; 
    display: flex; 
    flex-flow: column wrap; 
    max-height: 600px;  
} 

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

Bất kỳ ý tưởng nào tôi đang thiếu?

Answer 1

Các cột chồng lên nhau vì nội dung không vừa. Các mục không phù hợp trong nhóm, vì vậy chúng chảy qua. Để giải quyết điều này, bạn phải chỉ định một overflow-chiến lược cho nhóm div, với "tràn" như thế này (người cuối cùng):

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

    display: flex; 
    flex-flow: column wrap; 
    max-height: 600px; 

    overflow: hidden; 
} 

Mặc định là visible mà làm cho họ rơi bên ngoài. Đọc thêm tại đây: http://www.w3schools.com/cssref/pr_pos_overflow.asp

Có các tùy chọn khác ngoài hidden. Bạn có thể đặt cuộn dọc/ngang hoặc cả hai. Chỉ cần chọn bất cứ điều gì giúp bạn gần gũi hơn với "khung nhìn danh sách được nhóm theo WinJS" mong muốn. Hãy thử:

overflow-x: scroll; 
overflow-y: auto; 

hoặc

overflow-y: auto; 
overflow-x: scroll; 

Chúc mừng mã hóa!

Answer 2

Nếu bạn không muốn nội dung của bạn tràn container bạn phải xác định flex-shrink: 0;

flex-teosource

'số' thành phần này đặt flex-teo longhand và quy định cụ thể flex co lại yếu tố, trong đó xác định bao nhiêu mục flex sẽ co lại tương đối so với phần còn lại của các mặt hàng flex trong container flex khi tiêu cực không gian miễn phí được phân phối. Khi bỏ qua, nó được đặt thành 1. Hệ số co ngót flex được nhân với cơ sở flex khi phân phối không gian âm.

Im không chắc chắn những gì hành vi bạn đang cố gắng để bắt chước kể từ khi tôi chưa từng sử dụng winJS winJS, tuy nhiên tôi nghĩ rằng đây là gần gũi hơn với các hành vi thích hợp, bạn đang tìm kiếm để đạt được: http://jsfiddle.net/w8ts4Lnx/11/

Answer 3

"chúng ta hãy nhóm phát triển theo chiều ngang "- Bạn phải sử dụng hướng uốn là" hàng "trên nhóm., và bạn phải quấn các nhóm bên trong #content, sau đó nó sẽ không chồng lên nhau nữa.

http://jsfiddle.net/gafcvq9b/2/

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

#content > .group { 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid #cfcfcf; 
    background-color: #ddd; 
    display: flex; 
    flex-flow: row wrap; 
    max-height: 600px;  
} 

Answer 4

Tôi nghĩ tốt nhất là không nên đặt chiều rộng vì bạn muốn flexbox tự động xác định nó. vì vậy tôi đã gỡ bỏ nó và sau đó tôi thêm flex phát triển để tăng nhóm đầu tiên.

http://jsfiddle.net/mspriyakk/vv3tfrtv/3/

#content > .group:nth-of-type(1) { 
    flex-grow: 2; 
} 
#content > .group .item { 
    margin: 10px; 
    padding: 10px; 
    background-color: #aaa; 
} 

Answer 5

Đây là câu trả lời đúng đó của bản vá chồng chéo cột:

.flex-container { 
    display: flex; 
    flex-flow: column; 
} 

.flex-item { 
    flex: 1 0 auto; 
}