Wanneer u hoogte toevoegt aan een element met meerdere kolommen, kunt u bepalen hoe de inhoud de kolommen vult. De inhoud kan opeenvolgend worden uitgebalanceerd of gevuld.
ul ( height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; )Deze eigenschap is alleen beschikbaar in Firefox. Firefox zal de inhoud automatisch balanceren in een lay-out met meerdere kolommen met beperkte hoogte. De andere browsers vullen kolommen altijd opeenvolgend als ze een hoogtebeperking krijgen.
Om Firefox zich te laten gedragen zoals de andere browsers, dat wil zeggen om kolommen opeenvolgend te vullen, kunt u instellen column-fill: auto.
Waarden
column-fillaccepteert de trefwoordwaarden balanceen auto.
balancezal elke kolom vullen met ongeveer dezelfde hoeveelheid inhoud, maar zal niet toestaan dat de kolommen groter worden dan de height. Het kan zijn dat de kolommen korter verschijnen dan de, heightomdat de browser de inhoud horizontaal horizontaal verdeelt.
autozal elke kolom vullen totdat deze de bereikt heighten dit doen totdat de inhoud op is. Gezien de inhoud zal deze waarde niet noodzakelijk alle kolommen vullen, noch ze gelijkmatig vullen.
Het is net zoiets als sap in glazen gieten. Je kunt een gelijke hoeveelheid sap in elk glas gieten en merken dat je niet elk glas helemaal vult ( balance). Je kunt ook een glas helemaal vullen tot het vol is en dit herhalen tot er geen sap meer is. Als gevolg hiervan bevatten de resterende glazen mogelijk minder of geen sap ( auto).
Zie het voorbeeld van de kolomvulling van de pen (CSS-Tricks) door CSS-Tricks (@ css-tricks) op CodePen.
Browser-ondersteuning
De column-filltrefwoordwaarden werken specifiek in Firefox. Ze werkten niet in augustus 2014 toen dit Almanak-item oorspronkelijk werd geschreven, maar wel wanneer ze opnieuw worden getest in augustus 2015 (Chrome 44). Tijdens dat testen lijkt het erop dat het dynamisch veranderen van de waarde niet zou duren, je moest een relayout forceren.
Browserondersteuning voor lay-out met meerdere kolommen in het algemeen:
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ieder | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Vergeet uw voorvoegsels niet!
