CSS Flex- items
Onderliggende elementen (items)
De directe onderliggende elementen van een flexcontainer worden automatisch flexibele (flex)items.
1
2
3
4
Het bovenstaande element stelt vier blauwe flexitems voor in een grijze flexcontainer.
Voorbeeld
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
De eigenschappen van het flexitem zijn:
De bestelling Property
De ordereigenschap specificeert de volgorde van de flexitems.
1
2
3
4
Het eerste flexitem in de code hoeft niet als eerste item in de lay-out te verschijnen.
De bestelwaarde moet een getal zijn, de standaardwaarde is 0.
Voorbeeld
De ordereigenschap kan de volgorde van de flexitems 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>
De flex-grow Property
De flex-groweigenschap specificeert hoeveel een flex-item zal groeien ten opzichte van de rest van de flex-items.
1
2
3
De waarde moet een getal zijn, de standaardwaarde is 0.
Voorbeeld
Laat het derde flexitem acht keer sneller groeien dan de andere flexitems:
<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>
De flex-shrink Property
De flex-shrinkeigenschap specificeert hoeveel een flexitem zal krimpen ten opzichte van de rest van de flexitems.
1
2
3
4
5
6
7
8
9
10
De waarde moet een getal zijn, de standaardwaarde is 1.
Voorbeeld
Laat het derde flex-item niet zo veel krimpen als de andere flex-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>
De flex-basis Woning
De flex-basiseigenschap specificeert de initiële lengte van een flexartikel.
1
2
3
4
Voorbeeld
Stel de beginlengte van het derde flexitem 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>
De flexwoning
De flexeigenschap is een verkorte eigenschap voor de
flex-grow, flex-shrink, en flex-basiseigenschappen.
Voorbeeld
Maak het derde flexitem niet groeibaar (0), niet krimpbaar (0) en met een initiële lengte van 200 pixels:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
De align-self-eigenschap
De align-selfeigenschap specificeert de uitlijning voor het geselecteerde item in de flexibele container.
De align-self eigenschap overschrijft de standaarduitlijning die is ingesteld door de align-itemseigenschap van de container.
1
2
3
4
In deze voorbeelden gebruiken we een container van 200 pixels hoog, om de
align-selfeigenschap beter te demonstreren:
Voorbeeld
Lijn het derde flexitem uit in 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>
Voorbeeld
Lijn het tweede flex-item uit aan de bovenkant van de container en het derde flex-item aan de onderkant 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>
De eigenschappen van CSS Flexbox-items
De volgende tabel bevat alle eigenschappen van CSS Flexbox Items:
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |