Dodając wysokość do elementu wielokolumnowego, możesz kontrolować sposób wypełniania kolumn przez zawartość. Treść może być równoważona lub uzupełniana sekwencyjnie.
ul ( height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; )Ta właściwość jest dostępna tylko w przeglądarce Firefox. Firefox automatycznie zrównoważy zawartość w układzie wielokolumnowym o ograniczonej wysokości. Inne przeglądarki zawsze będą wypełniać kolumny sekwencyjnie, gdy zostaną podane ograniczenia dotyczące wysokości.
Aby Firefox zachowywał się tak jak inne przeglądarki, czyli sekwencyjnie wypełniał kolumny, możesz ustawić column-fill: auto.
Wartości
column-fillakceptuje wartości słów kluczowych balancei auto.
balancewypełni każdą kolumnę mniej więcej taką samą ilością treści, ale nie pozwoli, aby kolumny wzrosły wyższe niż height. Może się okazać, że kolumny będą krótsze niż kolumny, heightponieważ przeglądarka rozprowadza zawartość równomiernie w poziomie.
autowypełni każdą kolumnę, aż dotrze do heighti będzie to robić, aż skończy się zawartość. Biorąc pod uwagę zawartość, ta wartość niekoniecznie będzie wypełniać wszystkie kolumny ani równomiernie je wypełniać.
To trochę jak wlewanie soku do szklanek. Możesz wlać taką samą ilość soku do każdej szklanki i przekonać się, że nie napełniasz każdej szklanki do góry ( balance). Alternatywnie możesz napełnić szklankę do góry, aż będzie pełna i powtarzać to, aż nie pozostanie sok. W rezultacie pozostałe szklanki mogą mieć mniej soku lub wcale ( auto).
Zobacz przykład wypełnienia kolumn Pen (CSS-Tricks) autorstwa CSS-Tricks (@ css-tricks) w CodePen.
Wsparcie przeglądarki
Wartości column-fillsłów kluczowych działają szczególnie w przeglądarce Firefox. Nie działały w sierpniu 2014 r., Kiedy ten wpis Almanachu został pierwotnie napisany, ale działa po ponownym przetestowaniu w sierpniu 2015 r. (Chrome 44). Podczas tego testu wydaje się, że dynamiczna zmiana wartości nie byłaby możliwa, trzeba było wymusić przekaźnik.
Ogólne wsparcie przeglądarek dla układu wielokolumnowego:
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Każdy | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Nie zapomnij o swoich przedrostkach!