Over CSS flex layout
Veel websites zijn gebouwd op een grid-systeem, een raster dat bestaat uit rijen en kolommen, dat lijkt op een tabel. Een
populair grid-systeem is Bootstrap, dat werkt met twaalf kolommen (die
naar eigen inzicht gecombineerd kunnen worden) en een onbeperkt aantal rijen.
Een beperking van dit soort platforms is dat het aantal kolommen een vast gegeven is. Die beperking heb je niet als je ze
zelf programmeert in CSS.
Er zijn binnen CSS drie manieren om een webpagina in te delen met een grid-systeem: grid
layout, floating layout en flex layout, vaak ook Flexbox
genoemd.
Met deze drie methodes kun je dezelfde resultaten halen, met aanzienlijk minder code.
Op deze pagina wordt CSS flex layout behandeld.
Dit verhaal leunt zwaar op de uitleg van de module CSS-Flex op w3schools.com: Flex Intro, Flex container en Flex Item (Hier "Child" genoemd).
De mogelijkheden van het CSS flex layout systeem zijn zeer uitgebreid. Het voert ver om alles in detail te behandelen, maar we proberen het toch.
De CSS gebruikt alleen class voor de opmaak. id kan worden gebruikt als er referenties van of aan JavaScript
nodig zijn. De HTML die de cellen in het document zet, zijn allemaal van de vorm <div class=" … ">.
De <div>-tags worden vaak genest.
Een flex layout is in principe niet responsive, maar dat kun je afdwingen. Dat kan met een paar eenvoudige ingrepen.
Een flex-layout wordt opgesloten in een container. Er kunnen in een document meerdere containers zijn. Binnen het
flex layout-systeem ben je dus niet gebonden aan één opmaak voor de hele pagina.
Binnen de container worden de cellen gedefinieerd. De rijen ontstaan doordat je het aantal kolommen opgeeft.
De HTML ziet er in zijn eenvoudigste vorm als volgt uit:
<div class="flex-container">
<div class="flex-child">Child 1 Child 1</div>
<div class="flex-child">Child 2 Child 2</div>
<div class="flex-child">Child 3 Child 3</div>
<div class="flex-child">Child 4 Child 4</div>
<div class="flex-child">Child 5 Child &5lt;/div>
<div class="flex-child">Child 6 Child 6</div>
</div>
De bijbehorende CSS is:
<style>
.flex-container {
display:flex;
background-color:#c0c0c0;
padding:5px;
}
.flex-child {
background-color:#fafafa;
border:1px solid black;
padding:10px;
width:200px;
}
</style>
Dit alles leidt tot :
Bij nadere beschouwing vallen een paar dingen op:
- De container bestaat de hele breedte van het document.
- De children zijn links en naar boven aangeschoven, zonder tussenruimte. Als je wel tussenruimte wilt, doe je dat met margin.
- De children beslaan de ruimte die nodig is voor het child. De width:200px werkt alleen als er ruimte over is in de container.
- De randen en de padding zijn geen deel van de cel (box-sizing:border-box helpt niet).
- De content van de children is links uitgelijnd. Om dat te veranderen gebruik je text-align.
Het is niet zinvol om children samen samen te voegen, net zoals dat kan met cellen bij tabellen, met rowspan en colspan.
Responsive maken
Een om een flex-layout responsive te maken kin je de eigenschappen flex-direction en flex-wrap gebruiken, desgewenst
in de verkorte schrijfwijze met flex-flow.
Deze eigenschappen kun je instellen afhankelijk van de breedte van het document:
Als de breedte van het document 600px is of kleiner, worden de children onder elkaar gezet. Daarvoor wordt de flex-direction
op column gezet. Dat wordt gedaan met onderstaande uitbreiding van de CSS:
/* Responsive layout - Breedte van het window <= 600px */
@media (max-width: 600px) {
.flex-container { /* Children onder elkaar ipv naast elkaar */
flex-direction: column;
}
}
Opmerking:
Zoals bij het begin van dit verhaal is genoemd zijn er binnen CSS drie grid systemen waarmee je hetzelfde kunt bereiken. Je
kunt je het beste toeleggen op één systeem en alleen dát gebruiken.
Als je eenmaal een van de drie systemen grid, float of flex hebt gekozen, zorg dan dat je er goed in
wordt. Deze systemen door elkaar gebruiken geeft verwarring en leidt meestal niet tot het beste resultaat.
