CSS Flexbox is een nieuwe CSS techniek die het makkelijker maakt om flexibele en responsieve layouts te maken zonder gebruik te maken van float of positionering. Met flexbox kun je de elementen in een container (de flex container) laten groeien of krimpen om de beschikbare ruimte te optimaliseren, terwijl je de volgorde en de afstand tussen de elementen kunt bepalen. De elementen in de container (de flex items) passen zich automatisch aan aan de grootte en de richting van de container.
CSS Flexbox verschilt van div’s op verschillende manieren. Div’s zijn blokelementen die standaard onder elkaar worden gestapeld. Om ze naast elkaar te plaatsen, moet je gebruik maken van float of positionering, wat vaak leidt tot complexe en fragiele code. Bovendien moet je vaak extra elementen toevoegen om lege ruimtes op te vullen of om hoogtes gelijk te maken.
CSS Flexbox daarentegen maakt het mogelijk om elementen naast elkaar te plaatsen zonder float of positionering, en laat je ook eenvoudig de ruimte tussen en binnen de elementen verdelen. CSS Flexbox is ook responsiever dan div’s, omdat het zich automatisch aanpast aan verschillende schermformaten en -oriëntaties.
Hoe werkt CSS Flexbox?
Om flexbox te gebruiken, moet je eerst een flex container definiëren. Dat doe je door aan een element de eigenschap display: flex of display: inline-flex toe te voegen. Bijvoorbeeld:
.container{
display:flex;
}
De child HTML elementen van zo’n container (zoals bijv. <img>, <div>, <p> etc..) worden flex items genoemd. Je kunt vervolgens verschillende eigenschappen gebruiken om de layout van de container en de flex items aan te passen. De belangrijkste zijn:
De richting : flex-direction
Met de eigenschap flex-direction kun je de hoofdrichting van de flexbox bepalen. Er zijn 4 mogelijke waarden:
- flex-direction: row; horizontaal van links naar rechts (default)
- flex-direction: row-reverse; horizontaal van rechts naar links
- flex-direction: column; verticaal, van boven naar beneden
- flex-direction: column-reverse; verticaal, van beneden naar boven
.container{
display:flex;
flex-direction: row;
}
De uitlijning op de hoofdrichting: justify-content
Om de uitlijning van de items op de hoofdrichting (obv. de flex-direction) te bepalen gebruik je justify-content in je CSS. Bij justify-content zijn er de volgende mogelijkheden:
- justify-content: flex-start; links uitgelijnd (default)
- justify-content: flex-end; rechts uitgelijnd.
- justify-content: center; in het midden uitgelijnd
- justify-content: space-between; gelijk verdeeld over de box van begin tot eind
- justify-content: space-around; gelijk verdeeld over de box maar met padding.
.container{
display:flex;
flex-direction: row;
justify-content: flex-start;
}
De uitlijning op de nevenrichting: align-items
Om de uitlijning van de items op de nevenrichting te bepalen gebruik je de eigenschap align-items. Bij align-items zijn er de volgende mogelijkheden:
- align-items: auto; (default)
- align-items: flex-start; uitgelijnd aan het begin.
- align-items: flex-end; uitgelijnd aan het eind.
- align-items: center; uitgelijnd in het midden..
- align-items: stretch; volledig uitgelijnd met de inhoud van de container.
- align-items: baseline; uitgelijnd op basis van de baseline.
.container{
display:flex;
flex-direction: row;
justify-content: flex-start;
align-items:stretch;
}
Afbreken van de rij items : flex-wrap
Wanneer er teveel flex items zijn op rij kun je deze flex-item wel of niet automatisch te laten verschijnen op de volgende rij. Hiervoor gebruik je de eigenschap flex-wrap. Bij flex-wrap zijn er de volgende mogelijkheden:
- flex-wrap: wrap; flex items worden bij een overflow op de volgende rij gezet.
- flex-wrap: nowrap; flex items worden altijd op dezelfde rij gezet.
- flex-wrap: wrap-reverse; flex items worden in omgekeerde volgorde gezet.
.container{
display:flex;
flex-direction: row;
justify-content: flex-start;
align-items:stretch;
flex-wrap:wrap;
}
Overige flex eigenschappen
Overige eigenschappen die je kunt gebruiken bij flexbox zijn:
- align-content. Bepaalt de uitlijning van meerdere regels items. (boven, onder, midden, stretch, tussen, rond)
- flex-basis. Bepaalt de initiële grootte van een item.
- flex-grow. Bepaalt hoeveel een item kan groeien als er extra ruimte is in de container
- flex-shrink. Bepaalt hoeveel een item kan krimpen als er extra ruimte is in de container
- align-self. Hiermee kun je de uitlijning op een indiviueel item bepalen.
- order. bepaal de volgorde van de items ten opzichte van elkaar.
Meer weten over CSS Flexbox?
Wil je meer weten over CSS Flexbox kijk dan ook even op de onderstaande links.
