Wat is CSS Flexbox?
CSS Flexbox (Flexible Box Layout) is een eendimensionaal layoutmodel voor het verdelen van ruimte en het uitlijnen van elementen in een rij of kolom. De flex-container wordt gedefinieerd met display: flex, en de directe kinderen worden flex-elementen. Belangrijke container-eigenschappen: flex-direction (rij of kolom), flex-wrap (enkele vs. meerdere regels), justify-content (uitlijning langs de hoofdas), align-items (uitlijning langs de dwarsas per regel) en align-content (uitlijning langs de dwarsas van meerdere regels). Belangrijke element-eigenschappen: flex-grow (hoeveel een element groeit), flex-shrink (hoeveel het krimpt), flex-basis (begingrootte) en align-self (overschrijft align-items van de container voor een specifiek element). Flexbox is ideaal voor navigatiebalken, kaartrijen, gecentreerde lay-outs en elke eendimensionale indeling.
De CSS Flexbox Generator gebruiken
-
Pas de containereigenschappen aan (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) met de vervolgkeuzemenu's en het invoerveld.
-
Klik op een element in de voorbeeldweergave om het te selecteren (wordt oranje).
-
Stel flex-grow, flex-shrink, flex-basis en align-self van het geselecteerde element in het elementenpaneel in.
-
Klik op '+ Element toevoegen' om elementen toe te voegen; klik op 'Verwijderen' om het geselecteerde element te verwijderen.
-
Schakel tussen de CSS- en HTML-tabbladen om de gegenereerde code te zien en klik vervolgens op Kopiëren.
-
Klik op 'Alles resetten' om opnieuw te beginnen met de standaard indeling van 3 elementen.