Flexbox Generator
Stel een flex-container en de bijbehorende items in met visuele knoppen, zie de lay-out direct reageren en kopieer de CSS met één klik.
Je lay-out wordt direct in je browser opgebouwd. Niets van wat je hier instelt, wordt geüpload naar BroBroGo.
Veelgestelde vragen
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.