CSS Flexbox

1
2
3
4
5
6
7
8

Probeer het zelf uit

CSS Flexbox-layoutmodule

Voor het verschijnen van de module voor Flexbox-layout waren er de volgende vier layoutmodellen beschikbaar:

  • Block (Block), gebruikt voor delen (secties) van de pagina
  • Inline (Inline), gebruikt voor tekst
  • Tabel, gebruikt voor twee-dimensionale tabelgegevens
  • Positie, gebruikt voor de specifieke positie van het element

De module voor flexbox-layout, die het mogelijk maakt om flexibele responsieve lay-outstructuren gemakkelijker te ontwerpen, zonder float of positie te gebruiken.

Browserondersteuning

Alle moderne browsers ondersteunen flexbox eigenschappen.

29.0 11.0 22.0 10 48

Flexbox-elementen

Om Flexbox-model te beginnen te gebruiken, moet u eerst een Flex-container definiëren.

1
2
3

De bovenstaande elementen representeren een flex-container met drie flex-elementen (blauwe zone).

Voorbeeld

bevat een flex-container met drie flex-elementen:

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

Probeer het zelf uit

ouder element (container)

door display De eigenschap is ingesteld op flexde flex-container zal aanpasbaar zijn:

1
2
3

Voorbeeld

.flex-container {
  display: flex;
}

Probeer het zelf uit

Hier zijn de eigenschappen van het flex-container:

flex-direction Eigenschap

flex-direction De eigenschap definieert in welke richting de container de flex-elementen moet stacken.

1
2
3

Voorbeeld

column De waarde stelt horizontale stack van flex-elementen in (van boven naar beneden):

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

Probeer het zelf uit

Voorbeeld

column-reverse De waarde stackt flex-elementen verticaal (van onder naar boven):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

Probeer het zelf uit

Voorbeeld

row De waarde stackt flex-elementen horizontaal (van links naar rechts):

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

Probeer het zelf uit

Voorbeeld

row-reverse De waarde stackt flex-elementen horizontaal (van rechts naar links):

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

Probeer het zelf uit

flex-wrap Eigenschap

flex-wrap De eigenschap bepaalt of flex-elementen overgeslagen moeten worden.

Het volgende voorbeeld bevat 12 flex-elementen om de flex-wrap-eigenschap beter te demonstreren.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Voorbeeld

wrap De waarde bepaalt dat de flex-elementen worden overgeslagen indien nodig:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Probeer het zelf uit

Voorbeeld

nowrap De waarde bepaalt dat de flex-elementen niet worden overgeslagen (standaard):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

Probeer het zelf uit

Voorbeeld

wrap-reverse De waarde bepaalt dat de flex-elementen in omgekeerde volgorde worden overgeslagen indien nodig:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Probeer het zelf uit

flex-flow Eigenschap

flex-flow De eigenschap is een verkorte eigenschap om tegelijkertijd de flex-direction- en flex-wrap-eigenschappen in te stellen.

Voorbeeld

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

Probeer het zelf uit

justify-content Eigenschap

justify-content De eigenschap wordt gebruikt om flex-elementen uit te lijnen:

1
2
3

Voorbeeld

center De waarde lijnt de flex-elementen uit in het midden van de container:

.flex-container {
  display: flex;
  justify-content: center;
}

Probeer het zelf uit

Voorbeeld

flex-start De waarde lijnt de flex-elementen uit aan het begin van de container (standaard):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

Probeer het zelf uit

Voorbeeld

flex-end De waarde leidt tot het uitlijnen van de flex-elementen aan het einde van de container:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

Probeer het zelf uit

Voorbeeld

space-around De waarde toont flex-elementen met een spatie voor, tussen en achter de regels:

.flex-container {
  display: flex;
  justify-content: space-around;
}

Probeer het zelf uit

Voorbeeld

space-between De waarde toont flex-elementen met een spatie tussen de regels:

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

Probeer het zelf uit

align-items Eigenschap

align-items De eigenschap wordt gebruikt om flex-elementen verticaal uit te lijnen.

1
2
3

In deze voorbeelden gebruiken we containers van 200 pixels hoog om de align-items-eigenschap beter te demonstreren.

Voorbeeld

center De waarde lijnt de flex-items uit in het midden van de container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

Probeer het zelf uit

Voorbeeld

flex-start De waarde lijnt de flex-items uit op de bovenkant van de container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

Probeer het zelf uit

Voorbeeld

flex-end De waarde lijnt de flexibele items uit op de onderkant van de container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

Probeer het zelf uit

Voorbeeld

stretch De waarde strekt de flex-items uit om de container te vullen (standaard):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

Probeer het zelf uit

Voorbeeld

baseline De waarde zorgt ervoor dat de flex-items op de tekstbasis uitgelijnd zijn:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

Probeer het zelf uit

Opmerking:Let op:

1
2
3
4

align-content Eigenschap

align-content De eigenschap wordt gebruikt om de flexibele lijnen uit te lijnen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

In deze voorbeelden gebruiken we containers van 600 pixels hoog en stellen we de flex-wrap-eigenschap in op wrap, om de align-content-eigenschap beter te demonstreren.

Voorbeeld

space-between De waarde toont de flexibele lijnen met gelijke afstanden tussen hen:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

Probeer het zelf uit

Voorbeeld

space-around De waarde toont de flexibele lijnen met spaties ervoor, ertussen en erachter:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

Probeer het zelf uit

Voorbeeld

stretch De waarde strekt de flexibele lijnen uit om de overige ruimte in te nemen (standaard):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

Probeer het zelf uit

Voorbeeld

center De waarde wordt weergegeven in het midden van de container:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

Probeer het zelf uit

Voorbeeld

flex-start De waarde wordt weergegeven aan het begin van de container:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

Probeer het zelf uit

Voorbeeld

flex-end De waarde wordt weergegeven aan het einde van het container:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

Probeer het zelf uit

Perfecte centrering

In het volgende voorbeeld lossen we een zeer常见e stijlprobleem op: perfecte centrering.

Oplossing: maak justify-content en align-items De eigenschappen zijn ingesteld op centreren, daarna zullen de flex-items perfect centreren:

Voorbeeld

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

Probeer het zelf uit

Onderliggende elementen (items)

De directe afhankelijke elementen van een flex-container worden automatisch flexibele (flex) items.

1
2
3
4

De bovenstaande elementen vertegenwoordigen vier blauwe flex-items binnen een grijs flex-container.

Voorbeeld

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

Probeer het zelf uit

De eigenschappen die worden gebruikt voor elastische items zijn:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

De eigenschap order

order De eigenschap bepaalt de volgorde van het flex-item.

1
2
3
4

Het eerste flex-item in de code hoeft niet als het eerste item in de lay-out te worden weergegeven.

order De waarde moet een getal zijn, de standaardwaarde is 0.

Voorbeeld

order De eigenschap kan de volgorde van het flex-item wijzigen:

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

Probeer het zelf uit

De eigenschap flex-grow

flex-grow De eigenschap bepaalt hoeveel een flex-item zal groeien ten opzichte van de andere flex-items.

1
2
3

De waarde moet een getal zijn, de standaardwaarde is 0.

Voorbeeld

Maak de groeisnelheid van de derde elastische item acht keer sneller dan die van de andere elastische items:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

Probeer het zelf uit

De eigenschap flex-shrink

flex-shrink De eigenschap bepaalt hoeveel een flex-item zal inkrimpen ten opzichte van de andere flex-items.

1
2
3
4
5
6
7
8
9

De waarde moet een getal zijn, de standaardwaarde is 0.

Voorbeeld

Laat de derde elastische item niet evenveel krimpen als de andere elastische items:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Probeer het zelf uit

De eigenschap flex-basis

flex-basis De eigenschap bepaalt de oorspronkelijke lengte van het flex-item.

1
2
3
4

Voorbeeld

Stel de oorspronkelijke lengte van de derde elastische item in op 200 pixels:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

Probeer het zelf uit

De eigenschap flex

flex De eigenschap is een verkorte vorm van de eigenschappen flex-grow, flex-shrink en flex-basis.

Voorbeeld

Maak de derde elastische item niet groeibaar (0), niet in te krimpen (0) en de oorspronkelijke lengte is 200 pixels:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

Probeer het zelf uit

De eigenschap align-self

align-self Het kenmerk bepaalt de uitlijning van de geselecteerde items in een elastische container.

align-self De eigenschap zal de standaard uitlijning instellen die door de eigenschap align-items van het container is ingesteld, overschrijven.

1
2
3
4

In deze voorbeelden gebruiken we een container van 200 pixels hoog om de eigenschap align-self beter te demonstreren:

Voorbeeld

Lijn de derde elastische item uit op het midden van de container:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Probeer het zelf uit

Voorbeeld

Lijn de tweede elastische item uit op het bovenste deel van de container, en lijn de derde elastische item uit op het onderste deel van de container:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

Probeer het zelf uit

Responsieve afbeeldingsbibliotheek met Flexbox

Gebruik Flexbox om een responsieve afbeeldingsbibliotheek te maken, die afhankelijk van het schermformaat wisselt tussen vier, twee of volbreed beelden:

Probeer het zelf uit

Responsieve website met Flexbox

Gebruik flexbox om een responsieve website te maken, inclusief een elastische navigatiebalk en elastische inhoud:

Probeer het zelf uit

CSS Flexbox eigenschappen

De tabel hieronder somt de CSS-eigenschappen op die samen met flexbox worden gebruikt:

Eigenschap Beschrijving
display Stelt het doos-type in voor HTML-elementen.
flex-direction Stelt de richting van de elastische items in het elastische container vast.
justify-content Wanneer de elastische items niet alle beschikbare ruimte op de hoofdas gebruiken, worden deze items horizontaal uitgelijnd.
align-items Wanneer de elastische items niet alle beschikbare ruimte op de hoofdas gebruiken, worden deze items verticaal uitgelijnd.
flex-wrap Stelt vast of de elastische items moeten worden doorgeschoven, als er niet voldoende ruimte is op een flex-lijn om ze te bevatten.
align-content Wijzigt het gedrag van de eigenschap flex-wrap. Net als align-items, maar het aligneert niet de elastische items, maar de flex-lijn.
flex-flow De korte schrijfwijze van de eigenschappen flex-direction en flex-wrap.
order Stelt de volgorde van de elastische items ten opzichte van de andere elastische items in dezelfde container vast.
align-self Gebruikt voor elastische items. Overgrijpt de eigenschap align-items van het container.
flex De korte schrijfwijze van de eigenschappen flex-grow, flex-shrink en flex-basis.