CSS & Styling

Wat is Flexbox en hoe werkt het?

Flexbox is een layout systeem dat elementen flexibel arrangkeert in één richting (rijen of kolommen).

Home/Categorieën/CSS & Styling/Wat is Flexbox en hoe werkt het?

Flex Container en Items

Parent element (container) krijgt display: flex. Children (items) worden automatisch flex items. Container controleert hoe items arrangeren.

Belangrijkste properties

flex-direction: row (standaard) of column justify-content: horizontal verdeling (space-between, center, flex-start) align-items: verticale verdeling flex-wrap: items wrappen naar volgende rij flex: shorthand voor flex-grow, flex-shrink, flex-basis

Code Voorbeelden

CSSBasis Flexbox layout✏️ Interactief
✏️CODE AANPASSEN
LIVE PREVIEW
HTMLHTML structuur✏️ Interactief
✏️CODE AANPASSEN
LIVE PREVIEW

Relevante trefwoorden

flexboxlayoutflex-directionjustify-content