2012-12-27 16 views
10

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:Jak używać css3 flexbox do tworzenia układu wielokolumnowego bez rozwijania się w pionie?

enter image description here

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.

+0

Gdyby cała sprawa się płyn bez względu na to, jak duża/mała zrobić okno? Dlaczego produkty mają ustaloną szerokość 200 pikseli? Czy któraś .group mogłaby mieć kolumny, czy tylko pierwszą? Czy w ogóle powinien być jakiś przelew? (co się stanie, jeśli dodaję 100 pozycji do każdej grupy) Flexbox nie tworzy kolumn do układania w stosy, jak to, co chcesz, to nie jest cel układu flexbox.Uzyskanie tego, co chcesz na swoim zdjęciu jest łatwe. Po prostu nie znam wszystkich wymagań skalowania, co może sprawić, że będzie to bardzo trudne lub niemożliwe z samego CSS. – skyline3000

+0

@ skyline3000 Eksperymentuję z projektem w stylu Windows 8 "metro" z prostym HTML/CSS, więc idealnie każda grupa będzie dodawać kolumny w poziomie, w razie potrzeby i powodować poziomy pasek ''ff' 'niezbędny (więc najpierw dodaj elementy w pionie, a następnie zawiń przez kolumnę poziomo). Mogę sobie wyobrazić, jak to osiągnąć dzięki JS, ale miałem nadzieję, że można to zrobić tylko za pomocą HTML5/CSS3 w Webkit. –

+0

@ skyline3000 Aby odpowiedzieć bezpośrednio na pytania: Tak, powinna być płynna niezależnie od wysokości/szerokości ekranu (nie mam kontroli nad rozmiarem ekranu). Każdy przedmiot ma stały rozmiar według projektu, będzie to prawdą dla mojej ostatecznej realizacji. Być może nie te dokładne wymiary, ale naprawione. Wreszcie, jak już wspomniałem powyżej, elementy powinny wypełniać się pionowo, a następnie przepełniać w poziomie. –

Odpowiedz

6

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

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 :-)