CSS Flex- container
Bovenliggend element (container)
Zoals we in het vorige hoofdstuk hebben aangegeven, is dit een flexcontainer ( het blauwe gebied) met drie flexitems :
1
2
3
De flexcontainer wordt flexibel door de displayeigenschap in te stellen op
flex:
Voorbeeld
.flex-container {
display: flex;
}
De eigenschappen van de flexcontainer zijn:
De flex-richting Property
De flex-directioneigenschap definieert in welke richting de container de flexitems wil stapelen.
1
2
3
Voorbeeld
De columnwaarde stapelt de flexitems verticaal (van boven naar beneden):
.flex-container {
display: flex;
flex-direction: column;
}
Voorbeeld
De column-reversewaarde stapelt de flexitems verticaal (maar van onder naar boven):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Voorbeeld
De rowwaarde stapelt de flexitems horizontaal (van links naar rechts):
.flex-container {
display: flex;
flex-direction: row;
}
Voorbeeld
De row-reversewaarde stapelt de flexitems horizontaal (maar van rechts naar links):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
De flex-wrap Property
De flex-wrapeigenschap geeft aan of de flexitems moeten worden ingepakt of niet.
De onderstaande voorbeelden hebben 12 flex-items, om het
flex-wrappand beter te demonstreren.
1
2
3
4
5
6
7
8
9
10
11
12
Voorbeeld
De wrapwaarde geeft aan dat de flexitems indien nodig worden ingepakt:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Voorbeeld
De nowrapwaarde geeft aan dat de flex-items niet teruglopen (dit is standaard):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Voorbeeld
De wrap-reversewaarde geeft aan dat de flexibele artikelen indien nodig in omgekeerde volgorde worden verpakt:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
De flex-flow-eigenschap
De flex-floweigenschap is een steno-eigenschap voor het instellen van zowel de
flex-directionen
flex-wrapeigenschappen.
Voorbeeld
.flex-container {
display: flex;
flex-flow: row wrap;
}
De eigenschap voor het rechtvaardigen van inhoud
De justify-contenteigenschap wordt gebruikt om de flex-items uit te lijnen:
1
2
3
Voorbeeld
De centerwaarde lijnt de flexitems uit in het midden van de container:
.flex-container {
display: flex;
justify-content: center;
}
Voorbeeld
De flex-startwaarde lijnt de flex-items uit aan het begin van de container (dit is standaard):
.flex-container {
display: flex;
justify-content: flex-start;
}
Voorbeeld
De flex-endwaarde lijnt de flex-items uit aan het einde van de container:
.flex-container {
display: flex;
justify-content: flex-end;
}
Voorbeeld
De space-aroundwaarde geeft de flexitems weer met spatie voor, tussen en na de regels:
.flex-container {
display: flex;
justify-content: space-around;
}
Voorbeeld
De space-betweenwaarde geeft de flexitems weer met spatie tussen de regels:
.flex-container {
display: flex;
justify-content: space-between;
}
De align-items Property
De align-itemseigenschap wordt gebruikt om de flexitems uit te lijnen.
1
2
3
In deze voorbeelden gebruiken we een container van 200 pixels hoog, om de
align-itemseigenschap beter te demonstreren.
Voorbeeld
De centerwaarde lijnt de flexitems uit in het midden van de container:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Voorbeeld
De flex-startwaarde lijnt de flexitems boven aan de container uit:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Voorbeeld
De flex-endwaarde lijnt de flex-items uit aan de onderkant van de container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Voorbeeld
De stretchwaarde rekt de flex-items uit om de container te vullen (dit is standaard):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Voorbeeld
De baselinewaarde lijnt de flex-items uit, zoals hun basislijnen:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Opmerking: in het voorbeeld worden verschillende lettergroottes gebruikt om aan te tonen dat de items worden uitgelijnd met de tekstbasislijn:
1
2
3
De eigenschap align-content
De align-contenteigenschap wordt gebruikt om de flexlijnen uit te lijnen.
1
2
3
4
5
6
7
8
9
10
11
12
In deze voorbeelden gebruiken we een container van 600 pixels hoog, met de
flex-wrapeigenschap ingesteld op wrap, om de eigenschap beter te demonstreren align-content.
Voorbeeld
De space-betweenwaarde geeft de flexlijnen weer met gelijke ruimte ertussen:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Voorbeeld
De space-aroundwaarde geeft de flexlijnen weer met spatie ervoor, ertussen en erna:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Voorbeeld
De stretchwaarde rekt de flexlijnen uit om de resterende ruimte in te nemen (dit is standaard):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Voorbeeld
De centerwaardeweergaven geven de flexlijnen in het midden van de container weer:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Voorbeeld
De flex-startwaarde geeft de flexlijnen aan het begin van de container weer:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Voorbeeld
De flex-endwaarde geeft de flexlijnen aan het einde van de container weer:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Perfect centreren
In het volgende voorbeeld lossen we een veelvoorkomend stijlprobleem op: perfecte centrering.
OPLOSSING: Stel zowel de eigenschappen
justify-contenten in op , en het flex-item wordt perfect gecentreerd:align-itemscenter
Voorbeeld
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
De CSS Flexbox-containereigenschappen
De volgende tabel bevat alle CSS Flexbox Container-eigenschappen:
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |