Dikey olarak genişletilmeden çok sütunlu düzen oluşturmak için css3 flexbox nasıl kullanılır?

Question

Chrome'da css3'ün flexbox'ında oynuyorum (bunun için tarayıcılar için endişelenmenize gerek yok). İçeriğimi istediğim gibi hazırlamak için ikna etmekte zorlanıyorum. İşte

benim girişimi bir jsFiddle var: İşte benim hedefinin bir karalama http://jsfiddle.net/Yht4V/2/ Bu onun yüksekliğini genişleyecektir her .group dışında büyük işe ziyade birden fazla sütun oluşturmak gibi görünüyor.

Ben yaygın bir buraya flexbox'a kullanıyorum. body, sayfanın kalan yüksekliğini alarak #content div ile dikey olarak ortaya çıkar. Her .group, yatay olarak düzenlenmiştir. Son olarak, her bir .item, bir sargı ile dikey olarak bir .group içinde düzenlenir.

Ne yazık ki, her bir .group, #content yüksekliğini artırarak tek bir sütun olarak biter, bu da dikey kaydırma çubuğuna neden olur (istenmeyen). Her bir .group'un yüksekliğini sabit bir piksel boyutuna ayarlarsanız, öğeler birden fazla sütuna bölünür, ancak bu, flexbox'ın akışkanlığını bozar. Burada sabit yükseklikleri gibi görünüyor: http://jsfiddle.net/Yht4V/3/ Yani

, her şey sabit yüksekliği ayarlamadan flexboxes ile yönetilmektedir beri benim #content div dikey genişlemez böyle ulaşır? Ebeveyninin boyunu genişletmek ve bir kaydırma çubuğuna neden olmak yerine, daha fazla sütun tetiklemek için flexbox bekliyordum.

Answer 1

Flexbox için Chrome ve Opera uygulamalarında gördüğüm kadarıyla, flex-direction sütun öğesi, öğenin yüksekliğini kısıtlamayı gerektirir, aksi takdirde dikey olarak genişlemeye devam eder. Sabit bir değer olmak zorunda değil, bir yüzde olabilir.

size .group elemanları için istediğiniz düzen de CSS Kolonlar modülü kullanarak elde edilebilir, Söylediğin. Elemanların akışı, flexbox kolon oryantasyonuna benzer olacaktır, ancak belgenin ne kadar uzun olduğuna bakılmaksızın, onlar için yeterli genişlikte olduğu sürece sütunlar oluşturacaktır.

http://jsfiddle.net/Yht4V/8/ ben alabilir bu kadar yakın ilgiliydi, iç içe flexboxes bir demet olarak bırakılması

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; 
} 

(Eğer önekleri eksikliği mazur gerekecek) o:

http://jsfiddle.net/Yht4V/9/ (yine, hiçbir önek)

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

css'nizde aşağıdaki değiştirin - ekranı: -webkit-flex ; aşağıdaki - ekran: -webkit-kutu;

Tüm bu olay olursa olsun pencere yapmak ne kadar büyük/küçük akışkan olmalı