Flexbox is een CSS techniek waarmee je snel en gemakkelijk de layout van blokken op je website kunt regelen. Bij de flexbox techniek maakt het in principe niet uit hoe breed de blokken zijn, ze zullen automatisch op de meest logische en efficiënte manier gebruik maken van de beschikbare ruimte.
Flexbox is responsive, dus als je de layout regelt met flexbox, dan zal deze layout op elk scherm goed getoond worden.
Is Flexbox hetzelfde als een grid?
Nee, met een grid kun je de gehele layout van je website regelen en met behulp van een grid kun je er voor zorgen dat je website volledig responsive is. Een grid zorgt voor de layout in zowel horizontale als verticale richting.
Met flexbox maak je ook een responsive layout, alleen dan maar in één richting. Je kiest dus voor een layout in horizontale richting (blokken naast elkaar) of verticale richting (blokken onder elkaar).
Flexbox is met name geschikt voor bepaalde onderdelen op je website die meerdere blokken hebben, waarvoor je de layout wilt regelen.
Hoe werkt Flexbox ?
Om de werking van Flexbox uit te leggen, heb ik er een video van gemaakt. Onder de video zal ik een aantal voorbeelden geven van Flexbox eigenschappen.
De video kun je hieronder bekijken:
De Flexbox eigenschappen
Nu volgen er een aantal voorbeelden van Flexbox eigenschappen met de bijbehorende waardes.
Het eerste wat je nodig hebt, is een hoofdblok. Dus een div die je een class naam geeft. In de video zag je dat ik een div aanmaakte met de css class blok.
Ik gaf deze class de volgende eigenschappen en waardes mee:
- width:100%;
- background-color:#eee;
- height:400px;
- margin:auto;
Vervolgens maakte ik 4 kindblokken aan in mijn hoofdblok. Deze kindblokken kregen allemaal de class item. In de CSS code regelde ik het volgende voor de class item:
- background-color:#1c3051;
- border:solid 1px #ff6600;
- width:200px;
- color:#fff;
- text-align:center;
In de webbrowser zag dit er als volgt uit:
Je ziet dat de 4 kindblokken onder elkaar staan. Door nu aan mijn hoofdblok, dus de div met de class blok de eigenschap display met waarde flex toe te voegen (dus display:flex;), kreeg je het volgende resultaat:
De eigenschap flex-direction
Je ziet dat de vier blokken nu mooi naast elkaar komen te staan in het hoofdblok. Je kunt de richting van de blokken (dus worden de blokken naast elkaar of onder elkaar geplaatst) regelen met de eigenschap flex-direction. Deze eigenschap kun je ook weer toekennen aan je hoofdblok en zal van invloed zijn op de layout van de kindblokken in dit hoofdblok.
Standaard staat de waarde van deze eigenschap op row. Zou je de waarde op row-reverse zetten (dus: flex-direction:row-reverse), dan worden de blokken aan de rechterkant van je hoofdblok geplaatst en wordt de volgorde van de blokken ingesteld vanaf de rechterkant. Zie de afbeelding hieronder:
Wil je de blokken niet naast elkaar maar juist onder elkaar plaatsten, dan wordt de waarde van de eigenschap flex-direction gezet op column (dus flex-direction:column;). Dit ziet er als volgt uit:
Met de waarde column-reverse (dus flex-direction:column-reverse;) worden de kindblokken onderin het hoofdblok geplaatst en loopt de volgorde van de kindblokken van onder naar boven. Zie onderstaande afbeelding:
De justify-content eigenschap
Met deze eigenschap kun je de layout van de kindblokken in het hoofdblok bepalen. In de onderstaande voorbeelden heb ik overigens de flex-direction eigenschap weer op "row" gezet.
De standaard waarde van de eigenschap justify-content is "flex-start" (dus: justify-content:flex-start;). Hiermee worden de kindblokken gepositioneerd aan het begin van het hoofdblok. Zie de onderstaande afbeelding:
De eigenschap flex-end zorgt ervoor dat de blokken aan het einde van het hoofdblok worden geplaatst. Let op dat de volgorde van de kindblokken wel van links naar rechts blijft. De css schrijfwijze wordt dus: justify-content:flex-end;. Het voorbeeld zie je in de onderstaande afbeelding:
Wil je de blokken nu in het midden van het hoofdblok plaatsen, dan kun je de waarde van justify-content op "center" zetten (justify-content:center;). Zie onderstaande afbeelding:
Wil je nu dat de kind blokken de volledige ruimte innemen van het hoofdblok en dat er een gelijkmatige tussenruimte tussen de blokken is, dan kun je de waarde van justify-content op "space-between" zetten (justify-content:space-between;). Zie de volgende afbeelding voor het voorbeeld:
Wil je ook aan de beide buitenkanten nog wat ruimte, zet dan de waarde van justify-content op "space-around" (justify-content:space-around;). Zie de onderstaande afbeelding:
Merk in bovenstaande voorbeeld op dat de vier kindblokken perfect de beschikbare ruimte van het hoofdblok in beslag nemen. Je hoeft je verder geen zorgen te maken om breedtes, margins, floats of wat dan ook. Door de flexbox techniek krijg je een mooie gelijkmatige layout van vier blokken binnen een hoofdblok.
De flex-wrap eigenschap
Met deze eigenschap bepaal je of alle kindblokken op één rij getoond moeten worden, of dat ze mogen worden verdeeld over meerdere rijen.
De standaard waarde voor de flex-wrap eigenschap is "no-wrap". Dit zorgt er voor dat alle blokken op één rij worden getoond. Ongeacht hoeveel blokken je hebt of hoe breed ze zijn.
Zou je de blokken over meerdere rijen willen tonen, zet dan de waarde op "wrap" (dus flex-wrap:wrap;).
In onderstaande voorbeeld zie je dat er 8 kindblokken zijn, verdeeld over twee rijen:
Blokken verticaal uitlijnen met flexbox
Met de eigenschap "align-items" kun je de blokken verticaal uitlijnen. De standaard waarde is "stretch". Hiermee worden de kindblokken even hoog als het hoofdblok. Dit is ook wat je in de bovenstaande afbeeldingen steeds ziet.
De eigenschap align-items kent meerdere waardes. Zo kun je de warde flex-start toekennen (align-items:flex-start) dan worden de blokken aan de bovenkant van het hoofdblok geplaatst. Zie onderstaande afbeelding:
Je zult begrijpen dat dit: align-items:flex-end; de blokken onderin het hoofdblok plaatst.
Wil je nu de blokken verticaal in het midden uitlijnen, dan doe je dit door de eigenschap align-items de waarde "center" mee te geven (dus align-items:center;). Dit ziet er als volgt uit:
Naast de eigenschap "align-items" kent flexbox ook de eigenschap "align-content". Deze eigenschap is bedoeld om rijen met blokken verticaal te positioneren. Met align-content kun je bijvoorbeeld ook de waarde space-around of space-between gebruiken om vertical ruimte tussen rijen te regelen.
Meer informatie over Flexbox
Zoals je in dit artikel kunt lezen, kun je met Flexbox heel eenvoudig en heel snel de layout van blokken op je website regelen.
Gebruik de techniek niet voor het ontwerp van je site, maar gebruik het vooral voor bepaalde stukken content op je site waarbij je gebruik maakt van blokken.
Ik heb in dit artikel en in de video niet alle eigenschappen en waardes van Flexbox behandeld, maar hopelijk heb ik je wel een goede start gegeven om er eens mee te gaan experimenteren.
Hier vind je meer informatie over Flexbox
Flexbox gebruiken in Joomla of Wordpress
Uiteraard kun je de Flexbox techniek ook gebruiken in Joomla of Wordpress. De HTML code (de div's die de blokken vormen) kun je plaatsen in een artikel (Joomla) of bericht (Wordpress).
Om in Joomla in een artikel deze HTML code te kunnen plaatsen, klik je op de knop "schakelen tekstverwerker" onder het invoerveld van de tekstverwerker. Je komt dan in de HTML modus van het artikel, hier kun je de benodigde HTML code plaatsen.
In Wordpress ga je naar de tab "tekst" rechtsboven het veld van de tekstinvoer om in de HTML modus van een bericht te komen.
De benodigde CSS code kun je zetten in het template.css bestand van je template (Joomla) of in het style.css bestand van je thema (Wordpress).