Voorheen was het behoorlijk lastig om lay-outs te maken met verschillende blokken in CSS. Wij ontwikkelaars moesten namelijk altijd hacks gebruiken. Denk bijvoorbeeld aan float elementen en inline blokken. Hierdoor werd het lastig om complexe lay-outs te maken én de site tegelijkertijd responsief te houden. Door de flexbox methode is het makkelijker geworden om deze complexe lay-outs te bouwen. In dit artikel laat ik je zien hoe flexbox werkt en hoe het een website vervolgens kan verbeteren.
Wat is flexbox?
Met het Flexblox lay-out model is het mogelijk om efficiënte en dynamische volgorde van elementen toe te passen. Deze lay-outs zijn namelijk eendimensionaal gemaakt. Dit maakt de plaatsing van elementen in de container, met gelijk verdeelde ruimte, nu mogelijk. Deze lay-out maakt elementen responsief. Dit betekent dat de elementen hun gedrag veranderen, afhankelijk van de grootte van een apparaat. Denk hierbij bijvoorbeeld aan desktop, laptop, tablet en mobiel. Tevens maakt het elementen flexibel en geeft ze de juiste positie en ruimte.
Er zijn twee verschillende flexbox vormen: flex containers en flex items.
Wat zijn flex containers?
Flex containers zijn de zogenaamde ‘parent’ elementen. Oftewel, de verzamelbak voor de items. Hiermee kun je verschillende secties opzetten. Daarnaast heb je globaal de controle over de positie van de onderliggende items. Lees meer over flex containers.
Wat zijn flex items?
Dit zijn de ‘child’ elementen. Deze elementen zorgen voor de verschillende complexe blok lay-outs. Je hebt daardoor nog meer controle over de posities van de individuele items. Lees meer over flex items.
Flexbox eigenschappen
Om te bepalen hoe de containers en items gepositioneerd moeten worden, zijn er zes eigenschappen. Namelijk flex-direction, flex-wrap, flex-flow, justify-content, align-items en align-content.
Wat doet flex-direction?
Je kunt de flex-direction eigenschap gebruiken op de container. Deze eigenschap bepaalt vervolgens in welke richting de items kunnen stapelen binnen de container. Lees meer over flex-direction.
Wat doet flex-wrap?
Ook de flex-wrap eigenschap kun je gebruiken op de container. Deze eigenschap bepaalt of flex items binnen de container moet worden ingepakt, of dat ze uit de container mogen lopen. Lees meer over flex-wrap.
Wat doet flex-flow?
Nog een eigenschap die je kunt gebruiken op de container, is de flex-flow. Dit is een verkorte eigenschap voor het instellen van flex-direction en flex-wrap. Dit is simpelweg een combinatie van deze twee eigenschappen. Lees meer over flex-flow.
Wat doen justify-content, align-items en align-content?
Deze eigenschappen worden alle drie gebruikt op de container. Deze eigenschappen bepalen hoe flex items uitgelijnd worden binnen een container. Lees meer over justify-content, align-items en align-content.
Elementor en flexbox
Bij veel van onze projecten gebruiken we Elementor om een website te bouwen. Hiermee realiseren we mooie en unieke ontwerpen. Een nadeel van Elementor is echter dat hier geen flexbox gebruikt wordt. In plaats daarvan wordt er gebruik gemaakt van secties en kolommen. Het probleem hiervan, is dat er vervolgens snel te veel HTML-elementen worden gebruikt. Hierdoor wordt de HTML DOM (een objectmodel voor HTML-elementen) te groot. Dit zorgt voor performance problemen voor zowel de snelheid van de website als voor de Google score. Sinds Elementor versie 3.6 gelanceerd is, kan er ook gewerkt worden met flex containers. Hierdoor worden deze problemen opgelost en kunnen we nog complexere lay-outs bouwen.
De verschillen in Elementor
 |  |
De verschillen in de HTML structuur
 |  |
Conclusie
Flexbox bespaart ontwikkelaars dus een hoop stress en tijd. Dit gaat namelijk gepaard met float elementen en inline blokken. Zonder flexbox hadden we uiteindelijk een grote hoeveelheid aan HTML en CSS gehad. Dit had tot slot voor performance problemen kunnen zorgen. Flexbox doet al dit werk voor ons, zodat we ons in het vervolg kunnen concentreren op het bouwen van mooie en unieke websites.
Mocht je na het lezen van dit artikel meer willen weten wat we kunnen doen voor je? Neem dan contact met ons op voor een vrijblijvende afspraak.
