Flexbox

Wat is Flexbox?

Flexbox, of de Flexible Box Layout Module, is een CSS3-layoutmodel dat het eenvoudiger maakt om responsive layouts te maken. Het is ontworpen om ruimte te verdelen en items uit te lijnen binnen een container, zelfs als hun grootte onbekend of dynamisch is.

Waarom Flexbox Gebruiken?

• Eenvoudiger layoutbeheer: Geen floats of complexe marges meer.
• Responsiviteit: Elementen passen zich automatisch aan verschillende schermgroottes aan.
• Verticale en horizontale uitlijning: Makkelijk items centreren en positioneren.

Basisconcepten

• Flex Container: Het element dat display: flex; krijgt.
• Flex Items: De directe kinderen van de flex container.

Opzetten van een Flex Container

.container {
    display: flex;
}

Belangrijke Flexbox Eigenschappen

Voor de Container

• flex-direction: Bepaalt de richting van de flex items.

  .container {
      flex-direction: row; /* opties: row, row-reverse, column, column-reverse */
  }

• justify-content: Horizontale uitlijning van flex items.

  .container {
      justify-content: center; /* opties: flex-start, flex-end, center, space-between, space-around */
  }

• align-items: Verticale uitlijning van flex items.

  .container {
      align-items: center; /* opties: stretch, flex-start, flex-end, center, baseline */
  }

• flex-wrap: Bepaalt of flex items op meerdere regels kunnen staan.

  .container {
      flex-wrap: wrap; /* opties: nowrap, wrap, wrap-reverse */
  }

Voor de Items

• flex-grow: Bepaalt hoe een flex item groeit om beschikbare ruimte op te vullen.

   

  .item {
      flex-grow: 1; /* standaard is 0 */
  }

   

• flex-shrink: Bepaalt hoe een flex item krimpt als er minder ruimte is.

• flex-basis: De basisgrootte van een element voordat ruimte wordt verdeeld.