CSS Flexbox Layout Cheat Sheet

Het Flexbox (Flexible Box) layout-model biedt een efficiëntere manier om items binnen een container uit te lijnen en te verdelen, zelfs wanneer hun grootte onbekend of dynamisch is.

Flex-container

Set on parent: display: flex; or display: inline-flex;

Eigenschap	Beschrijving	Veelvoorkomende waarden
`flex-direction`	Richting van de hoofdas	`row`, `row-reverse`, `column`, `column-reverse`
`flex-wrap`	Wel of niet wrappen	`nowrap`, `wrap`, `wrap-reverse`
`flex-flow`	Afkorting voor richting en wrap	`row wrap`
`justify-content`	Uitlijning op de hoofdas	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`
`align-items`	Uitlijning op de dwarsas	`flex-start`, `flex-end`, `center`, `baseline`, `stretch`
`align-content`	Uitlijning van meerdere regels op de dwarsas	`flex-start`, `flex-end`, `center`, `space-between`, `stretch`

Flex-items

Set on children:

Eigenschap	Beschrijving	Standaard
`order`	Volgorde (lagere waarden komen eerst)	`0`
`flex-grow`	Groeifactor (wanneer ruimte beschikbaar is)	`0`
`flex-shrink`	Krimpfactor (wanneer ruimte tekort is)	`1`
`flex-basis`	Basisgrootte voor verdeling van de ruimte	`auto`
`flex`	Afkorting voor grow, shrink en basis	`0 1 auto`
`align-self`	Individuele uitlijning voor een enkel item	`auto`

Kernconcepten

Hoofdas (Main Axis): Standaard horizontaal, bepaald door flex-direction.
Dwarsas (Cross Axis): De richting loodrecht op de hoofdas.

Scenario-voorbeelden

Horizontaal en verticaal centreren

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Gelijkmatige breedteverdeling

.item {
  flex: 1; /* Resterende ruimte gelijkmatig bezetten */
}

Uitlijning aan beide uiteinden

.navbar {
  display: flex;
  justify-content: space-between;
}