De Flexbox technologie

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:

Flexbox voorbeeld 1

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:

Flexbox voorbeeld 2

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:

Flexbox voorbeeld 3

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:

Flexbox voorbeeld 4

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:

Flexbox voorbeeld 5

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:

Flexbox voorbeeld 6

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:

Flexbox voorbeeld 7

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:

Flexbox voorbeeld 8

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:

Flexbox voorbeeld 9

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:

Flexbox voorbeeld 10

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:

Flexbox voorbeeld 11

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:

Flexbox voorbeeld 12

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:

Flexbox voorbeeld 13

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).

Plaats reactie

Beveiligingscode
Vernieuwen