Je hebt zo van die uitdagingen die iedere ontwikkelaar wel eens tegenkomt. Bijvoorbeeld als je met CSS werkt. Dan zou je bijvoorbeeld willen dat het verticaal uitlijnen van een afbeelding een stuk eenvoudiger kan. Of de klant die vlak na de oplevering van zijn nieuwe site meteen opbelt met de vraag of er toch niet nog een kolom in het ontwerp bij kan. Na een diepe zucht (met mijn hand op de microfoon) kan ik meestal zonder al te geïrriteerde klank in mijn stem reageren met:
“Natuurlijk kan er een kolom bij. Ik moet dan alleen wel even de… hele.. opmaak… opnieuw… opbouwen.”
Er waren tijden dat ik me op zo’n moment echt voor de kop sloeg. Zodra je je gaat bezighouden met responsive design komen er allerlei soortgelijke uitdagingen op je af. Gelukkig heeft CSS hier goede oplossingen voor. Al sinds 2009, blijkt, maar het is nu ineens helemaal ‘hot’.
Zelf kwam ik hier ook pas kort geleden achter. Tijdens de WordPress Meetup Grunn gaf Luc Princen (Chef du Web) een presentatie over Flexbox. Deze CSS lay-out modus zorgt ervoor dat elementen op je pagina zich voorspelbaar gedragen wanneer de lay-out van je pagina zich moet aanpassen aan diverse viewports en apparaten. Inmiddels wordt Flexbox op meer dan 95% van de browsers ondersteund, en zelfs nog wel meer als je je beperkt tot de meest recente browsers.
Aan de hand van enkele eenvoudige opties kun je de lay-out op ontelbare manieren aanpassen. Een voorbeeld hiervan is flex-direction, waarmee je de richting kunt aangeven waarin de elementen geplaatst moeten worden. Zo kun je de items in een rij of juist in een kolom plaatsen. Daarnaast geef je aan in welke volgorde de items moeten staan. Met de optie justifiy-content bepaal jij hoe de browser de beschikbare ruimte moet verdelen over de elementen in je flexbox. En met flex-wrap regel je dat de elementen automatisch een nieuwe regel moeten vormen als de huidige regel vol zit.
Natuurlijk, dit zijn slechts enkele korte voorbeelden. Ik doe bij lange na geen recht aan alle mogelijkheden. Maar geloof me: Flexbox maakt je leven als ontwikkelaar een stuk aangenamer. Er staat inmiddels voldoende documentatie over Flexbox online en ook de nodige tutorials zijn via de zoekmachines snel gevonden.
Pieter Daalder
WordPress specialist Vevida
