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?
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.
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
@ 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. –
@ 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. –