Flexbox Generator

Introductie tot CSS Flexbox

CSS Flexbox is een lay-outmodel dat is ontworpen om elementen binnen een container efficiënt te verdelen, uit te lijnen en te positioneren, zelfs wanneer de grootte van deze elementen onbekend of dynamisch is. Het model biedt een eendimensionale methode om lay-outs te beheren, waarbij de focus ligt op de verdeling langs een enkele as. Door gebruik te maken van een flexibele container kunnen ontwikkelaars complexe structuren bouwen die zich automatisch aanpassen aan verschillende schermformaten en apparaten.

De werking van de Flex-container

De flex-container vormt de basis van elke flexbox-lay-out. Door eigenschappen op de container toe te passen, wordt bepaald hoe de onderliggende elementen zich ten opzichte van elkaar gedragen. De Flexbox Generator maakt het mogelijk om de volgende container-eigenschappen visueel in te stellen en direct het resultaat te bekijken:

• Richting (direction): Bepaalt de richting van de hoofdas waarin de items worden geplaatst. De opties zijn Row (horizontaal van links naar rechts), Row reverse (horizontaal van rechts naar links), Column (verticaal van boven naar beneden) en Column reverse (verticaal van beneden naar boven).
• Wrap: Regelt of items op één regel moeten blijven of mogen doorlopen naar een volgende regel. De beschikbare opties zijn No wrap (alle items worden op één regel gedwongen), Wrap (items die niet passen, zakken naar de volgende regel) en Wrap reverse (items lopen over naar een volgende regel in omgekeerde volgorde).
• Justify content: Verdeelt de ruimte tussen en rondom de items langs de hoofdas. De instellingen zijn Start, End, Center, Space between, Space around en Space evenly.
• Align items: Bepaalt de uitlijning van de items langs de dwarsas binnen hun regel. Dit kan worden ingesteld op Start, End, Center, Stretch of Baseline.
• Align content: Regelt de verdeling van de ruimte tussen de regels wanneer er meerdere regels zijn ontstaan door wrapping. De opties zijn Start, End, Center, Stretch, Space between, Space around en Space evenly.
• Tussenruimte (gap): Een numerieke waarde die de ruimte tussen de items onderling en tussen de verschillende regels definieert, zonder dat er handmatig marges toegevoegd hoeven te worden.

Eigenschappen van Flex-items aanpassen

Naast de container kunnen ook de individuele elementen binnen de container, de flex-items, afzonderlijk worden geconfigureerd. Wanneer er op de knop "Item toevoegen" wordt geklikt, verschijnt er een nieuw item in de lay-out (bijvoorbeeld "Item 5"). De eigenschappen die per item kunnen worden ingesteld zijn:

• Volgorde (order): Een numerieke waarde waarmee de visuele volgorde van het item kan worden aangepast, onafhankelijk van de volgorde in de HTML-broncode.
• Grow: Een numerieke waarde die bepaalt in welke mate een item mag groeien om de resterende vrije ruimte in de container op te vullen.
• Shrink: Een numerieke waarde die definieert in hoeverre een item mag krimpen wanneer er onvoldoende ruimte in de container aanwezig is.
• Basis: De beginmaat van het item voordat de resterende ruimte wordt verdeeld. Dit kan een numerieke waarde zijn of worden ingesteld op "Auto".
• Align self: Hiermee kan de uitlijning op de dwarsas voor een specifiek item worden overschreven, onafhankelijk van de align-items van de container. De opties zijn Auto, Start, End, Center, Stretch en Baseline.

In de gegenereerde CSS-code worden alleen specifieke CSS-regels aangemaakt voor de items waarvan de standaardeigenschappen daadwerkelijk zijn gewijzigd.

De relatie tussen assen en wrapping

Een belangrijk concept binnen Flexbox is de wisselwerking tussen de hoofdas (main axis) en de dwarsas (cross axis). Wanneer de richting wordt gewijzigd van Row naar Column, wisselen deze assen van rol. Dit heeft directe gevolgen voor de werking van justify-content en align-items. Bij een rij-indeling regelt justify-content de horizontale positionering en align-items de verticale positionering. Bij een kolom-indeling is dit exact omgekeerd.

Wanneer wrapping is uitgeschakeld (No wrap), worden alle items op één enkele regel geplaatst, wat ertoe kan leiden dat elementen smaller worden dan hun gewenste basisgrootte. Zodra wrapping wordt ingeschakeld (Wrap of Wrap reverse), kunnen items die de breedte of hoogte van de container overschrijden naar een nieuwe regel springen. Op dat moment treedt de eigenschap align-content in werking om de positionering van deze verschillende regels als één groep te beheren.

Veelvoorkomende lay-outpatronen realiseren

Met de Flexbox Generator kunnen snel verschillende standaard lay-outpatronen worden opgezet en gevisualiseerd:

• Centreren: Een element exact in het midden van een container plaatsen door zowel justify-content als align-items op Center in te stellen.
• Navigatiebalk: Items horizontaal verspreiden met justify-content ingesteld op Space between of Space around.
• Stapel (stack): Elementen verticaal onder elkaar plaatsen door de richting op Column in te stellen.
• Cards: Een raster van flexibele kaarten die netjes naar de volgende regel doorlopen met behulp van Wrap en een gedefinieerde Tussenruimte (gap).
• Zijbalk: Een lay-out waarbij een zijbalk een vaste of beperkte breedte heeft, terwijl de hoofdhouding flexibel meegroeit met behulp van de Grow-eigenschap.

Privacy en verwerking

Bij het gebruik van deze generator blijft de invoer volledig lokaal. De lay-out wordt direct in de browser van de gebruiker opgebouwd. Niets van wat de gebruiker instelt in de tool wordt geüpload naar BroBroGo.

Veelgestelde vragen (FAQ)

Wat is het verschil tussen justify-content en align-items?

Justify-content verdeelt de ruimte tussen items langs de hoofdas (de richting waarin de rij of kolom loopt), terwijl align-items de items langs de dwarsas positioneert. Als je de richting verandert van rij (row) naar kolom (column), wisselen de twee assen om. Justify-content werkt dan van boven naar beneden en align-items van links naar rechts.

Hoe werken de instellingen per item?

Selecteer een item op basis van zijn nummer en stel vervolgens in hoeveel het mag groeien (grow) om lege ruimte op te vullen, hoeveel het mag krimpen (shrink) bij ruimtegebrek, de beginmaat (basis) en de eigen uitlijning op de dwarsas. Met 'order' verplaats je een item visueel naar voren of achteren zonder de HTML aan te passen. Alleen de items die je daadwerkelijk aanpast, krijgen een eigen regel in de gegenereerde CSS.

Wanneer zijn wrap en align-content van belang?

Als wrapping uit staat, worden alle items op één regel gedwongen en kunnen ze smaller worden geknepen. Zet je het aan, dan zakken items die niet meer passen automatisch naar de volgende regel. Dat is het moment waarop align-content belangrijk wordt om de regels als groep te verdelen. Met 'gap' stel je de ruimte tussen de items en regels in, zonder dat je marges nodig hebt.