Jak używać css3 flexbox do tworzenia układu wielokolumnowego bez rozwijania się w pionie?

Question

Gram z Flexbox css3 w Chrome (nie trzeba się martwić o to w różnych przeglądarkach). Trudno mi jest przekonać go do przedstawienia moich treści tak, jak bym chciał. Oto szkic mojego celu:

Oto jsFiddle mojej próbie: http://jsfiddle.net/Yht4V/2/ Wydaje się to doskonale z wyjątkiem każdego .group rozszerzy swoją wysokość, zamiast tworzyć wiele kolumn.

Używam wszechobecnie Flexbox tutaj. Wartość body jest określana w pionie, przy czym div przyjmuje pozostałą wysokość strony. Każdy .group jest ułożony poziomo. Na koniec, każdy .item jest ułożony w pionie w pozycji .group z zawijaniem.

Niestety, każdy .group kończy się jako pojedyncza kolumna, zwiększając wysokość o #content, co powoduje pionowy pasek przewijania (niechciany). Jeśli ustawię wysokość każdego z .group na stały rozmiar pikseli, elementy będą rozbite na wiele kolumn, ale to pokona płynność flexbox. Oto, jak wygląda z ustalonymi wysokościami: http://jsfiddle.net/Yht4V/3/

Jak mogę uzyskać, aby mój div #content nie był rozwijany w pionie, ponieważ wszystko jest zarządzane za pomocą flexboxów bez ustawiania stałej wysokości? Spodziewałem się, że flexbox wyzwoli więcej kolumn zamiast powiększać wysokość swojego rodzica i powodując pasek przewijania.

Answer 1

Z tego, co widziałem w implementacjach Chrome i Opera dla Flexbox, kolumna flex-direction wymaga ograniczenia wysokości elementu, w przeciwnym razie będzie się rozszerzać pionowo. Nie musi to być stała wartość, może to być procent.

To powiedziawszy, układ, który chcesz dla swoich elementów .group można również uzyskać za pomocą modułu CSS Columns. Przepływ elementów będzie podobny do ustawienia kolumny flexbox, ale utworzy kolumny tak długo, jak będzie dla nich wystarczająca szerokość, niezależnie od długości dokumentu.

http://jsfiddle.net/Yht4V/8/ (musisz wybaczyć brak przedrostków)

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

pozostawiając ją jako pęczek zagnieżdżonych flexboxes, to było tak blisko, jak mogę dostać go:

http://jsfiddle.net/Yht4V/9/ (ponownie, żadnych przedrostków)

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

wymienić następujące w css - wyświetlacz: -webkit-flex ; do następujących - display: -webkit-box;

To działało bardzo dobrze dla mnie :-)