casscodes

Cursus HTML & CSS

Week 6

Flexbox

Introductie#

Flexbox is een CSS-layouttechniek waarmee je elementen snel en overzichtelijk naast of onder elkaar plaatst. De beschikbare ruimte kan automatisch over de elementen worden verdeeld, ook wanneer hun afmetingen verschillen.

Lesdoelen#

Inhoudsopgave#

Flexbox in het kort#

Flexbox regelt de plaats van elementen die direct binnen één omliggend element staan. Het is vooral geschikt voor één richting: een rij naast elkaar of een kolom onder elkaar.

.container {
  display: flex;
}

Zodra het omliggende element display: flex krijgt, worden de elementen die er direct in staan flexitems. De items worden standaard naast elkaar geplaatst.

Flexcontainer en flexitems#

Het omliggende element met display: flex heet de flexcontainer. De elementen die daar direct in staan, heten flexitems.

<div class="card-row">
  <article class="card">HTML</article>
  <article class="card">CSS</article>
  <article class="card">Flexbox</article>
</div>

.card-row {
  display: flex;
}

.card-row is de flexcontainer. De drie .card-elementen zijn flexitems. Elementen die binnen een card staan, horen bij die card en zijn niet automatisch flexitems van .card-row.

CSS-instellingen voor de container regelen de groep als geheel. Instellingen voor flexitems regelen één afzonderlijk item.

Hoofdas en dwarsas#

Flexitems worden langs twee assen geplaatst:

Bij flex-direction: row loopt de hoofdas normaal horizontaal en de dwarsas verticaal. Bij flex-direction: column draait dit om. De hoofdas is dus niet altijd horizontaal.

Flex direction#

flex-direction bepaalt de richting van de hoofdas.

.container {
  display: flex;
  flex-direction: row;
}

De mogelijke waarden zijn:

De visuele volgorde veranderen met reverse verandert niet de volgorde in de HTML. Houd de HTML-volgorde logisch voor toetsenbord- en schermlezers.

Flex wrap#

Standaard probeert Flexbox alle items op één regel te plaatsen. Met flex-wrap: wrap mogen items naar een volgende regel doorschuiven wanneer er onvoldoende ruimte is.

.card-row {
  display: flex;
  flex-wrap: wrap;
}

Veelgebruikte waarden zijn nowrap, wrap en wrap-reverse. Voor een flexibel kaartenoverzicht is wrap meestal de bruikbare keuze.

De eigenschappen flex-direction en flex-wrap kunnen samen kort worden geschreven met flex-flow:

.card-row {
  display: flex;
  flex-flow: row wrap;
}

Justify content#

justify-content verdeelt flexitems langs de hoofdas.

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

Veelgebruikte waarden zijn:

Align items#

align-items lijnt alle items langs de dwarsas uit.

.navigation {
  display: flex;
  align-items: center;
}

Veelgebruikte waarden zijn stretch, flex-start, center, flex-end en baseline. stretch is standaard en kan items op de dwarsas uitrekken wanneer ze daar geen vaste afmeting hebben.

Align content#

align-content verdeelt meerdere rijen of kolommen binnen de beschikbare ruimte. Deze eigenschap heeft alleen zichtbaar effect als de items over meerdere regels staan en er extra ruimte in de container is.

.card-row {
  display: flex;
  min-height: 500px;
  flex-wrap: wrap;
  align-content: center;
}

Gebruik align-items voor de uitlijning van items binnen een regel en align-content voor de verdeling van meerdere regels.

Gap#

Met gap maak je gelijke ruimte tussen flexitems zonder losse margins op ieder item.

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

Je kunt rij- en kolomruimte apart instellen:

.card-row {
  row-gap: 16px;
  column-gap: 24px;
}

Instellingen voor flexitems#

Een flexitem kan eigen instellingen krijgen.

.card {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 240px;
}

De korte schrijfwijze flex combineert deze drie waarden:

.card {
  flex: 1 1 240px;
}

Andere eigenschappen voor een flexitem zijn:

.belangrijk {
  order: -1;
  align-self: flex-start;
}

Wanneer Flexbox past#

Flexbox is geschikt wanneer een groep elementen hoofdzakelijk in één richting wordt verdeeld of uitgelijnd, bijvoorbeeld:

.centered {
  display: flex;
  min-height: 300px;
  align-items: center;
  justify-content: center;
}

Flexbox vervangt veel pagina-indelingen waarvoor vroeger float of ingewikkelde andere oplossingen werden gebruikt. Je kunt Flexbox ook combineren met media queries om de indeling op verschillende schermformaten aan te passen.

Kort onthouden#

Paginanavigatie#