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
.container {
  display: flex;
  flex-direction: row;        /* Rijen (standaard) */
  justify-content: space-between;  /* Items verdelen */
  align-items: center;        /* Verticaal centreren */
  gap: 20px;                  /* Ruimte tussen items */
}

.item {
  flex: 1;                    /* Gelijk grote items */
}
HTMLHTML structuur
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

Relevante trefwoorden

flexboxlayoutflex-directionjustify-content

Gerelateerde Vragen

← Terug naar CSS & StylingAlle categorieën →