CSS Flexbox Layout Spiegbriefje
Deze pagina biedt een visueel spiegbriefje voor de CSS Flexbox-layout, inclusief containereigenschappen, itemeigenschappen en veelvoorkomende layout-voorbeelden.
Containereigenschappen
| Eigenschap | Waarde | Beschrijving |
|---|---|---|
display |
flex |
Flexbox-layout inschakelen |
flex-direction |
row |
Hoofdas is horizontaal, beginpunt aan de linkerkant |
row-reverse |
Hoofdas is horizontaal, beginpunt aan de rechterkant | |
column |
Hoofdas is verticaal, beginpunt aan de bovenkant | |
column-reverse |
Hoofdas is verticaal, beginpunt aan de onderkant | |
flex-wrap |
nowrap |
Standaardwaarde, items op één regel |
wrap |
Items naar de volgende regel laten doorlopen | |
wrap-reverse |
Items in omgekeerde volgorde naar de volgende regel laten doorlopen | |
justify-content |
flex-start |
Uitlijning hoofdas: links uitgelijnd |
flex-end |
Uitlijning hoofdas: rechts uitgelijnd | |
center |
Uitlijning hoofdas: gecentreerd | |
space-between |
Uitlijning hoofdas: items gelijkmatig verdeeld; eerste item aan het begin, laatste item aan het einde | |
space-around |
Uitlijning hoofdas: items gelijkmatig verdeeld met gelijke ruimte aan beide kanten | |
align-items |
flex-start |
Uitlijning dwarsas: boven uitgelijnd |
flex-end |
Uitlijning dwarsas: onder uitgelijnd | |
center |
Uitlijning dwarsas: gecentreerd | |
baseline |
Uitlijning dwarsas: uitlijnen op de basislijn van de tekst | |
stretch |
Standaardwaarde, uitlijning dwarsas: uitgerekt om de container te vullen | |
align-content |
flex-start |
Uitlijning dwarsas (meerdere regels): boven uitgelijnd |
flex-end |
Uitlijning dwarsas (meerdere regels): onder uitgelijnd | |
center |
Uitlijning dwarsas (meerdere regels): gecentreerd | |
space-between |
Uitlijning dwarsas (meerdere regels): gelijkmatig verdeeld; eerste regel aan het begin, laatste aan het einde | |
space-around |
Uitlijning dwarsas (meerdere regels): gelijkmatig verdeeld met gelijke ruimte tussen de regels | |
stretch |
Standaardwaarde, uitlijning dwarsas (meerdere regels): uitgerekt om de resterende ruimte te vullen |
Itemeigenschappen
| Eigenschap | Waarde | Beschrijving |
|---|---|---|
flex-grow |
getal |
Bepaalt de mate waarin een item kan groeien; standaardwaarde is 0 (niet groeien) |
flex-shrink |
getal |
Bepaalt de mate waarin een item kan krimpen; standaardwaarde is 1 |
flex-basis |
auto |
Bepaalt de basisgrootte van een item voordat de resterende ruimte wordt verdeeld |
align-self |
auto |
Maakt individuele uitlijning van een item mogelijk, overschrijft align-items |
flex-start |
Item aan het begin van de container geplaatst | |
flex-end |
Item aan het einde van de container geplaatst | |
center |
Item in het midden geplaatst | |
baseline |
Basislijn van het item uitgelijnd met de basislijn van de container | |
stretch |
Item uitgerekt om de container te vullen (indien hoogte aanwezig) |
Veelvoorkomende Layout-voorbeelden
| Layout | Containereigenschappen | Itemeigenschappen |
|---|---|---|
| Horizontale navigatiebalk | display: flex;justify-content: space-around; |
|
| Verticale zijbalk | display: flex;flex-direction: column;justify-content: flex-start; |
|
| Rasterlayout (grid) | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| Kaartlayout (card) | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |