Wat is Flexbox?

Flexbox (Flexible Box Layout) is een CSS-module ontworpen voor het maken van complexe en responsieve lay-outs. Het stelt je in staat om de positie, uitlijning en verdeling van ruimte tussen de container-elementen te beheren, zelfs als hun afmetingen onbekend of dynamisch zijn.

Belangrijke concepten van Flexbox:

• Hoofdas (main axis): De as waarop de elementen worden geplaatst. Standaard horizontaal (van links naar rechts).
• Kruis-as (cross axis): De as loodrecht op de hoofdas. Standaard verticaal (van boven naar beneden).
• Container (flex container): Element waarop de Flexbox-eigenschappen worden toegepast (display: flex of display: inline-flex).
• Items (flex items): Kind-elementen van de container.

Eigenschappen voor de Flex-container:

• display: flex of inline-flex
• flex-direction: Bepaalt de richting van de hoofdas (row, row-reverse, column, column-reverse)
• flex-wrap: Bepaalt of de items op een nieuwe regel worden gezet (nowrap, wrap, wrap-reverse)
• justify-content: Uitlijning van de items langs de hoofdas (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: Uitlijning van de items langs de kruis-as (flex-start, flex-end, center, baseline, stretch)
• align-content: Uitlijning van rijen of kolommen langs de kruis-as in een multi-line container (flex-start, flex-end, center, space-between, space-around, stretch)

Eigenschappen voor de Flex-items:

• order: Bepaalt de volgorde van het item in de container
• flex-grow: Bepaalt hoeveel het item moet groeien om de beschikbare ruimte te vullen
• flex-shrink: Bepaalt hoe het item krimpt als er niet genoeg ruimte is
• flex-basis: Bepaalt de initiële grootte van het item voordat de ruimte wordt verdeeld
• flex: Kortere notatie voor flex-grow, flex-shrink en flex-basis
• align-self: Overschrijft de uitlijning van het item langs de kruis-as (flex-start, flex-end, center, baseline, stretch, auto)

Voorbeeld:

/* Container */
.container {
  display: flex; /* Flexbox activeren */
  flex-direction: row; /* In rij */
  justify-content: center; /* Horizontaal centreren */
  align-items: center; /* Verticaal centreren */
  height: 200px; /* Hoogte van de container */
  border: 1px solid black;
}

/* Items */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox vereenvoudigt het maken van responsieve lay-outs aanzienlijk in vergelijking met traditionele methoden (float, inline-block, table).