Wat is Flexbox?

Flexbox (Flexibele Box Layout) is een eendimensionaal lay-outmodel in CSS, ontworpen om ruimte tussen elementen in een container te verdelen en krachtige uitlijningsmogelijkheden te bieden. Het maakt het gemakkelijk om de grootte, volgorde en uitlijning van de kindelementen (flex-elementen) binnen de oudercontainer (flex-container) te beheren, ongeacht hun oorspronkelijke volgorde of grootte.

Belangrijke concepten van Flexbox:

• Flex-container: Element met display: flex of display: inline-flex. Hier worden de lay-outregels voor de directe kindelementen vastgesteld.
• Flex-elementen: Directe kindelementen van de flex-container. Aan hen worden Flexbox-eigenschappen toegepast die hun gedrag binnen de container bepalen.
• Hoofdas (main axis): As langs welke de flex-elementen worden geplaatst. Standaard horizontaal (van links naar rechts), maar kan worden gewijzigd met flex-direction.
• Kruis-as (cross axis): As loodrecht op de hoofdas.
• Hoofdeinde (main start) / Eind (main end): Begin en einde langs de hoofdas.
• Kruisbegin (cross start) / Eind (cross end): Begin en einde langs de kruis-as.

Belangrijke eigenschappen van Flexbox voor de flex-container:

• display: Bepaalt dat het element een flex-container is (flex of inline-flex).
• flex-direction: Bepaalt de richting van de hoofdas (row, row-reverse, column, column-reverse).
• flex-wrap: Bepaalt of flex-elementen op een nieuwe regel/kolom worden overgeschakeld als er niet genoeg ruimte is (nowrap, wrap, wrap-reverse).
• justify-content: Lijnt de flex-elementen uit langs de hoofdas (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Lijnt de flex-elementen uit langs de kruis-as (flex-start, flex-end, center, baseline, stretch).
• align-content: Lijnt de lijnen van flex-elementen uit (indien er meerdere zijn door flex-wrap) langs de kruis-as.

Belangrijke eigenschappen van Flexbox voor de flex-elementen:

• order: Bepaalt de weergavevolgorde van het flex-element (standaard 0).
• flex-grow: Groeifactor van het flex-element, die bepaalt hoeveel het kan groeien om de beschikbare ruimte op te vullen.
• flex-shrink: Krimpfactor van het flex-element, die bepaalt hoeveel het kan krimpen om overloop te voorkomen.
• flex-basis: Initiële grootte van het flex-element voordat de vrije ruimte wordt verdeeld.
• flex: Verkorting voor flex-grow, flex-shrink en flex-basis.
• align-self: Overschrijft align-items voor een specifiek flex-element.

Voorbeeld van gebruik:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Maakt de container flexibel */
  justify-content: center; /* Lijnt de elementen in het midden van de hoofdas uit */
  align-items: center; /* Lijnt de elementen in het midden van de kruis-as uit */
  height: 200px; /* Voor demonstratiedoeleinden */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Belangrijkste voordelen van Flexbox:

• Gemakkelijke uitlijning van elementen horizontaal en verticaal.
• Flexibele verdeling van ruimte tussen elementen.
• Gemakkelijk de volgorde van elementen wijzigen.
• Responsief ontwerp zonder float en position.
• Goede ondersteuning in moderne browsers.