Ga naar inhoud
GetPraut Dev Docs GetPraut Dev Docs

Flexbox

Hier een uitleg over de flexbox en flexbox gerelateerde properties. Flexbox bestaat uit properties sommige bestemd voor de parent elementen (flex container) en andere voor child elementen (flex items). Sommige voorbeelden lijken niet te werken of zijn overbodig. Dit is puur om combinaties tussen keywords te laten zien.

Flex container

Het balangrijkste property voor flex containers is display. Display beval veel opties voor values zoals block, inline, table, grid etc. Maar de twee values die revelant zijn flex en inline-flex.

  • Flex: Hiermee creëer je een flex container en de directe child elementen dat ze flex items zijn. Voor de rest reageert het als een block value element (Begint nieuwe regel en is volledig breed). Deze zal je het meeste gebruiken.
<div class="con">
    flex-container flex
</div>
.con {
    display: flex;
    background-color: red;
}
flex-container flex
  • Inline-flex: Doet hetzelfde als flex, alleen wekt het verder als een inline value element (Zet de container element langs elkaar met zijn sibblings met breedte tot het einde van de content. height en width properties werken niet). Alleen is er een execptie waarbij height en width WEL werken bij inline-flex.
<div class="con">
    flex-container inline-flex
</div>
<div class="con" width="400px">
    flex-container inline-flex breedte 400px
</div>
.con {
    display: inline-flex;
    background-color: red;
}
flex-container inline-flex
flex-container inline-flex breedte 400px

Flex-direction

Met de flex-direction property stuurt flex-items in een bepaalde richting. Om woorden zoals main-axis en cross-axis te vermijden is het simpel om horizontaal en verticaal te gebruiken. Al is de gebruik van de termen niet hetzelfde.

  • Row: Dit is standaard als je een flex container maakt. Deze value zet flex-itemms in een horizontale richting van links naar rechts.
<div class="con">
    <div class="item">child 1</div>
    <div class="item">child 2</div>
</div>
.con {
    display: flex;
    flex-direction: row;
    background-color: red;
}
.item {
    background-color: yellow;
}
child 1
child 2
  • Row-reverse: zet de flex-items in een horizontale richting van rechts naar links.
<div class="con">
    <div class="item">child 1</div>
    <div class="item">child 2</div>
</div>
.con {
    display: flex;
    flex-direction: row-reverse;
    background-color: red;
}
.item {
    background-color: yellow;
}
child 1
child 2
* **Column**: Zet de flex-items in een verticale richting van boven naar beneden. 
<div class="con">
    <div class="item">child 1</div>
    <div class="item">child 2</div>
</div>
.con {
    display: flex;
    flex-direction: column;
    background-color: red;
}
.item {
    background-color: yellow;
}
child 1
child 2
  • Column-reverse: Zet de flex-items in een verticale richting van beneden naar boven.
<div class="con">
    <div class="item">child 1</div>
    <div class="item">child 2</div>
</div>
.con {
    display: flex;
    flex-direction: column-reverse;
    background-color: red;
}
.item {
    background-color: yellow;
}
child 1
child 2

Flex-wrap

Met de flex-wrap kun je de flex-items op meerdere rijden hebben binnen een flex container. De flex-items moeten wel bij elkaar groter zijn dan de wijdte van de flex-container om effect te krijgen.

  • No-wrap: Alle flex-items blijve op één lijn. Dit is standaard.
<div class="con">
    <div class="item">child 1, 50% width</div>
    <div class="item">child 2, 50% width</div>
    <div class="item">child 3, 50% width</div>
</div>
.con {
    display: flex;
    flex-wrap: no-wrap;
    background-color: red;
}


.item {
    background-color: yellow;
    width: 50%;
}
child 1, 50% width
child 2, 50% width
child 3, 50% width
  • Wrap: Hiermee zet je de flex-items op meerdere rijen.
<div class="con">
    <div class="item">child 1, 50% width</div>
    <div class="item">child 2, 50% width</div>
    <div class="item">child 3, 50% width</div>
</div>
.con {
    display: flex;
    flex-wrap: wrap;
    background-color: red;
}


.item {
    background-color: yellow;
    width: 50%;
}
child 1, 50% width
child 2, 50% width
child 3, 50% width
  • Wrap-reverse: hetzelfde idee als bij flex-direction. Zet flex-items op meerdere rijen, maar dan van onder naar boven.
child 1, 50% width
child 2, 50% width
child 3, 50% width
.con {
    display: flex;
    flex-wrap: wrap-reverse;
    background-color: red;
}


.item {


    background-color: yellow;
    width: 50%;
}
child 1, 50% width
child 2, 50% width
child 3, 50% width

Flex-flow

Flex-flow is een shorthand (Een property waarbij er twee of meerdere properties bij elkaar gevoegd zijn) voor flex-direction en flex-wrap. Als standard staan de values op column en wrap.

.con {
    flex-flow: column wrap;
}

Justify-content

De justify-content property zorgt ervoor hoe de flex-items horizontall (main-axis) moeten staan als als er nog ruimte is.

Begin / eind uitgelijnd.

Tussen de onderstaande properties zit weinig verschil en is een beetje moeilijk uit te leggen, maar het verschil moet zitten in de flex-direction en de wrting-mode properties.

  • Flex-start: flex-items worden aan het begin van de flex-direction geplaast. Als je container niet flex is dan gedraagtt deze zich als start. Om het simpel te houden gebruiik dze eerder dan start of left.

  • Flex-end: flex-items worden aan het einde van de flex-direction geplaast. Als je container niet flex is dan gedraagtt deze zich als end. Om het simpel te houden gebruiik dze eerder dan end of right.

  • Start: Flex-items worden in de start hoek van de container gezet.

  • End: Flex-items worden in de eind hoek van de container gezet.

  • Center: Flex-items worden in het midden van de container gezet.

  • Left: Flex-items oworden aan de linketkant gezet van de container. als je horizontale axis niet paralel is met de inline axis zoals bij column gedraagt deze zich als start.

  • Right: Flex-items worden aan de rechterkant gezet van de container. als je horizontale axis niet paralel is met de inline axis zoals bij column gedraagt deze zich als end.

<div class="con con-1">
    <div class="item">child 1</div>
    <div class="item">child 2</div>
    <div class="item">child 3</div>
</div>


<div class="con con-1 reverse">
    <div class="item">child 1</div>
    <div class="item">child 2</div>
    <div class="item">child 3</div>
</div>
<!--con-2, con-3 ect. hebben dezelfde structuur.-->
/*algemeen*/
.con {
    display: flex;
    background-color: red;
}
/*row-reverse*/
.reverse {
    flex-direction: row-reverse;
}


/*flex-start*/
.con-1 {
    justify-content: flex-start;
}


/*flex-end*/
.con-2 {
    justify-content: flex-end;
}
/*start*/
.con-3 {
    justify-content:start;
}


/*end*/
.con-4 {
    justify-content:end;
}


/*left*/
.con-5 {
    justify-content:left;
}


/*right*/
.con-6 {
    justify-content:right;
}


/*center*/
.con-7 {
    justify-content: center;
}


.item {
    background-color: yellow;
    width: 25%;
}

flex-start

child 1
child 2
child 3

flex-start + row-reverse

child 1
child 2
child 3

flex-end

child 1
child 2
child 3

flex-end + row-reverse

child 1
child 2
child 3

start

child 1
child 2
child 3

start + row-reverse

child 1
child 2
child 3

end

child 1
child 2
child 3

end + row-reverse

child 1
child 2
child 3

left

child 1
child 2
child 3

left + row-reverse

child 1
child 2
child 3

right

child 1
child 2
child 3

right + row-reverse

child 1
child 2
child 3

Midden / Gespreid

  • Center: flex-items worder bij elkaaer horizontaal in het midden gezet.
  • Space-between: Tussen de flex-items De overgebleven ruimte wordt verdeelt als geleike tussen stukken. Bij de zijkanten van de container zitten de flex-items tegen de container aan.
  • Space-around: Tussen de flex-items De overgebleven ruimte wordt verdeelt als gelijke tussen stukken. Tussen de zijkanten van de container en flex-items zit er ruimte de grote van de helft van de gelijke stukken.
  • Space-evenly: Tussen de flex-items De overgebleven ruimte wordt verdeelyt als gelijke tussen stukken. Hierbij zijn de stukken tussen de zijkanten van de container en flex-items ook gelijk zoals de rest.

Safe / Unsafe

Er zijn ook 2 extra values die je voor de andere kunt plaatsen. Deze hebben te maken met de overflow property.

  • Safe: niet alle browsers erkennen safe. Dus deze niet gebruiken tot die meer erkend wordt door browsers. Wanneer een flex-item uit de container gaat wordt deze neergezet als start.
  • Unsafe: niet alle browsers erkennen unsafe. Dus deze niet gebruiken tot die meer erkend wordt door browsers. Wanneer een flex-item uit de container gaat behoudt die de aangegeven value.
<div class="con">
    <div class="item">child 1</div>
    <div class="item">child 2</div>
    <div class="item">child 3</div>
</div>
.con {
    display: flex;
    justify-content: center / space-between / space-around / space-evenly;
    background-color: red;
}
.con-safely {
    display: flex;
    justify-content: safe center;
    background-color: red;
}
.item {
    width: 25%;
    background-color: yellow;
}

center

child 1
child 2
child 3

space-evenly

child 1
child 2
child 2

space-around

child 1
child 2
child 3

space-between

child 1
child 2
child 3

safe + center

child 1
child 2
child 3

unsafe + center

child 1
child 2
child 3

Align-items

De align-items property zorgt ervoor hoe de flex-items verticaal (cross-axis) moeten staan.

Begin / eind uitgelijnd.

Tussen de onderstaande properties zit weinig verschil en is een beetje moeilijk uit te leggen, maar het verschil moet zitten in de flex-direction en de writing-mode properties.

  • Flex-start: Items worden aan de begin van de verticale kant geplaatst.
  • Flex-end: Items worden aan het einde van de verticale kant geplaatst.
  • Start: Items worden bij elkaar aan de start van de meest gepaste axis geplaatst.
  • End: Items worden bij elkaar aan het einde van de meest gepaste axis geplaatst.
  • Self-start: Items worden aan de start kant van de container geplaatst in de meest gepaste axis.
  • Self-end: Items worden aan het einde kant van de container geplaatst in de meest gepaste axis.
<div class="con">
  <div class="item">child 1</div>
  <div class="item">child 2</div>
  <div class="item">child 3</div>
</div>
.con {
   display:flex;
   align-items: flex-start / flex-end / start / end / self-start / self-end;
   background-color:red;
}


.item {
   width:25%;
   background-color:yellow;
   height:;//verschillend
}

row

flex-start

child 1
child 2
child 3

flex-start - column-reverse

child 1
child 2
child 3

flex-end

child 1
child 2
child 3

flex-end - row-reverse

child 1
child 2
child 3

self-end

child 1
child 2
child 3

self-end - row-reverse

child 1
child 2
child 3

start

child 1
child 2
child 3

start

child 1
child 2
child 3

end

child 1
child 2
child 3

end

child 1
child 2
child 3

self-start

child 1
child 2
child 3

self-start - row-reverse

child 1
child 2
child 3

Columns

flex-start

child 1
child 2
child 3

flex-start - column-reverse

child 1
child 2
child 3

flex-end

child 1
child 2
child 3

flex-end - column-reverse

child 1
child 2
child 3

self-start

child 1
child 2
child 3

self-start - column-reverse

child 1
child 2
child 3

start

child 1
child 2
child 3

start - column-reverse

child 1
child 2
child 3

end

child 1
child 2
child 3

end - column-reverse

child 1
child 2
child 3

self-end

child 1
child 2
child 3

self-end - column-reverse

child 1
child 2
child 3

Boven / beneden uitgelijnd.

  • Stretch: Flex-items vullen de container, maar respecteert height en width. Dit is standaard.
  • Center: Flex-items worden bij elkaar horizontaal in het midden gezet.
  • Baseline: Flex-items staan zo dat de tekst op dezelfde lijn staat. Text staat ook met de onderkant op de lijn. Als er twee font groottes zijn is het verschil goed te zien. zijn er meerdere regels dan werkt baseline met de bovenste regel.
  • First Baseline: Zelfde als baseline maar de tekst staat
  • Last Baseline: verschil met first baseline zit in dat de flex-items aan de onderkant van de container komt. zijn er meerdere regels met tekst, dan werkt last baseline met de onderste regel. Let wel op vaste heights die kunnen buiten de container vallen.
<div class="con">
<div class="item">child 1&<</div>
  <div class="item">child 2</div>
  <div class="item">child 3</div>;
</div>
.con {
   display:flex;
   align-items: Stretch / center / baseline / first baseline / last baseline;
   background-color:red;
}


.con-safety {
   display:flex;
   align-items:safe center;
   background-color:red;
   width:400;
}


.item {
   width:25%;
   background-color:yellow;
   height:;//verschillend
}

row

flex-stretch

child 1
child 2
child 3

stretch - column-reverse

child 1
child 2
child 3

baseline

child 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
child 2
child 3

baseline - row-reverse

child 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
child 2
child 3

last baseline

child 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
child 2
child 3

last baseline / row-reverse

child 1 Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit.
child 2
child 3

center

child 1
child 2
child 3

center / row-reverse

child 1
child 2
child 3

first baseline

child 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
child 2
child 3

first baseline / row-reverse

child 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
child 2
child 3

Columns

flex-stretch

child 1
child 2
child 3

stretch - column-reverse

child 1
child 2
child 3

baseline en first

child 1
child 2
child 3

baseline en first - column-reverse

child 1
child 2
child 3

center

child 1
child 2
child 3

center / column-reverse

child 1
child 2
child 3

last baseline

child 1
child 2
child 3

last baseline - column-reverse

child 1
child 2
child 3

Align-content

Align-content werkt bijna zoals justify-content alleen is dit meer bedoelt voor meerdere rijen en werkt alleen met flex-wrap die de values wrap of wrap-reverse heeft.

  • Normal: dit is standard. Laat flex-items op de normale positie staan.
  • Flex-start: zet flex items op het begin van de container.
    flex-start kijkt meer naar de flex-direction en start naar writing-mode.
  • Flex-end / end: zet flex-items op het einde van de container.
    flex-end kijkt naar het einde en end naar de writing-mode.
  • Center: Zet flex-items in het midden van de container.
  • Space-between: flex-items zijn verdeelt over de container met overgebleven ruimte tussen de rijen gelijk verdeelt. De eerste en laatste rij zitten tegen de container zelf aan.
  • Space-around: flex-items zijn gelijk verdeelt met overgebleven ruimte gelijk verdeelt tussen de rijen. Maar niet tussen container en rij, die hebben iets minder.
  • Space-evenly: Flex items zijn gelijk verdeelt met overgebleven ruimte gelijk verdeelt tussen rijen met elkaar en rijen met container kanten.
  • Stretch: de overgebleven ruimte wordt opgevuld met de flex-items.
<div class="con">;
  <div class="item">child 1</div>
  <div class="item">child 2</div>
  <div class="item">child 3</div>
</div>
.con {
   display:flex;
   align-content: normal / flex-start / flex-end / start / end / Stretch / center / space-between / space-around / space-evenly;
   flex-wrap:wrap;
   background-color:red;
}
.con-safety {
   display:flex;
   align-content:safe center;
   background-color:red;
   width:400;
}


.item {
   width://verschillend;
   background-color:yellow;


}

normal

child 1
child 2
child 3 height 40px
child 4
child 5

flex-start

child 1
child 2
child 3
child 4
child 5

space-between

child 1
child 2
child 3
child 4
child 5

space-evenly

child 1
child 2
child 3
child 4
child 5

center

child 1
child 2
child 3
child 4
child 5

flex-end

child 1
child 2
child 3
child 4
child 5

space-around

child 1
child 2
child 3
child 4
child 5

stretch

child 1
child 2
child 3 height:40px;
child 4
child 5

normal

child 1
child 2
child 3 height 40px
child 4
child 5

flex-start

child 1
child 2
child 3
child 4
child 5

space-between

child 1
child 2
child 3
child 4
child 5

space-evenly

child 1
child 2
child 3
child 4
child 5

center

child 1
child 2
child 3
child 4
child 5

flex-end

child 1
child 2
child 3
child 4
child 5

space-around

child 1
child 2
child 3
child 4
child 5

stretch

child 1
child 2
child 3 height:40px;
child 4
child 5

Gap

Gap, row-gap en column gap zijn properties die alleen ruimte toevoegt tussen de items. Dus er komt geen ruimte tussen de container zijdes en items. Als justify-content midden gerelateerde values aan de pas komen en er blijft meer tussen ruimte achter, dan zie je heer geen direct effect van tenzij je de venster kleiner maakt. Gap wordt gezien als minimum voor tussen ruimte. Kijk ook uit dat er items eruit gepusht worden.
Alle vorige voorbeelden hadden ook een gap. Om ruimte om de zijdes van de container te maken is er padding gebruikt.

  • Row-gap: geeft ruimte tussen rijen.

  • Column-gap: geeft ruimte tussen kolomen.

  • Gap: shorthand voor row-gap en column-gap.

.con {
   display:flex;
   background-color:red;
}


.con-gap{
   gap:25px 1%;
}


.con-row {
   row-gap:25px;
}


.con-col{
   column-gap:1%px;
}


.item {
   background-color:yellow;
}
<div class="con">
  <div class="item">child 1</div>
  <div class="item">child 2</div>
  <div class="item">child 3</div>
</div>

gap

child 1
child 2
child 3
child 1
child 2
child 3

column-gap

child 1
child 2
child 3
child 1
child 2
child 3

row-gap

child 1
child 2
child 3
child 1
child 2
child 3

gap werkt op de juiste manier

child 1
child 2
child 3

Gap en te grote items met no-wrap

child 1
child 2
child 3

gap met te veel overgebleven ruimte en space-between

child 1
child 2
child 3

Flex-items

Flex-items kunnen al goed staan door de properties van de container waar ze in zitten, maar kunnen zelf ook properties hebben voor specifieke aanpassingen.

Order

Standard is dit order van hoe het in de DOM staat, maar is aan te passen met een nummer. Dit is alleen visueel en veranderd niet hoe het in de DOM staat, dus screenreaders houden de DOM volgorde aan.

.con {
   display:flex;
   background-color:red;
}


.item {
   order:verschillend;
   background-color:yellow;
}
<div class="con">
  <div class="item">child 1</div>
  <div class="item">child 2</div>
  <div class="item">child 3</div>
</div>

order

child 1 order 2
child 2 order 1
child 3 order 3

order

child 1 order 0
child 2 order 1
child 3 order -2

order + row-reverse

child 1 order 2
child 2 order 1
child 3 order 3

Flex-grow

Met flex-grow kan een flex-item groeien als die dat tenminste kan. als alle items op 1 staan worden ze gelijk in grote. En als één van deze een 2 wordt, wordt deze 2 keer zo groot als de andere. Standard is de value van de property 0.

.con {
   display:flex;
   background-color:red;
}


.item {
   flex-grow:vershillend;
   background-color:yellow;
}

flex-grow 0

child 1
child 2
child 3

flex grow 1-2-1

child 1
child 2
child 3

flex grow 1-2-1 met te veel content zonder wrap

child 1 lorem ipsum ipsum ipsum
child 2 lorem ipsum ipsum ipsum
child 3 lorem ipsum ipsum ipsum

flex-grow 1

child 1
child 2
child 3

flex grow 1-2-1 met te veel content met wrap

child 1 lorem ipsum ipsum ipsum
child 2 lorem ipsum ipsum ipsum
child 3 lorem ipsum ipsum ipsum

Flex-shrink

verkleint de flex-item. Een item met een 2 is dan de helft van de andere als die dat kan. Standard heeft deze de value 1. Dit is beter uit te leggen bij de flex shorthand property.

Flex-basis

Dit geeft de standard grote van een element aan voordat overgebleven ruimte is verdeelt. Flex-basis kan een lengte (bv. 200px, 50%) of keyword (auto, max-content, min-content, fit-content) bevatten. als flex-grow en flex-shrink op alle flex-items in een container de value 1 hebben groeit of krimpt deze mee.

.con {
   display:flex;
   background-color:red;
}


.item {
   flex-basis:vershillend;
   background-color:yellow;
}

flex-basis 200px

child 1
basis
child 3

flex-basis auto

child 1
basis
child 3

flex-basis 200px + alles grow en shrink 1

child 1
basis
child 3

flex-basis 0

child 1
basis
child 3

Flex

Flex is een shorthand voor flex-grow, flex-shrink en flex-basis. Het is beter om de shorthand te gebruiken dan de individuele properties zelf. 

.con {
   display:flex;
   background-color:red;
}


.item {
   flex:flex-grow flex-shrink flex-basis;
   background-color:yellow;
}

flex 1 1 auto alles gelijk

child 1
child 2
child 3

flex 2 1 auto

child 1
basis
child 3

flex 1 1 0, 1 1 0, 2 1 0

child 1
child 2 met lange tekst
child 3

flex 1 1 60%, 1 1 40%

child 1
child 2 met lange tekst

flex 1 2

child 1
basis
child 3

flex 0 1 60px

child 1
basis
child 3

flex 1 1 auto, 1 1 auto, 2 1 auto

child 1
child 2 met lange tekst
child 3

Align-self

Align-self overschrijft de align-items property van de container om een specifieke flex-item anders neer te zetten. De values van align-self zijn hetzelfde als die van align-items.

  • Flex-start: Items worden aan de begin van de verticale kant geplaatst.
  • Flex-end: Items worden aan het einde van de verticale kant geplaatst.
  • Start: Items worden bij elkaar aan de start van de meest gepaste axis geplaatst.
  • End: Items worden bij elkaar aan het einde van de meest gepaste axis geplaatst.
  • Self-start: Items worden aan de start kant van de container geplaatst in de meest gepaste axis.
  • Self-end: Items worden aan het einde kant van de container geplaatst in de meest gepaste axis.
  • Stretch: Flex-items vullen de container, maar respecteert height en width. Dit is standard.
  • Center: Flex-items worden bij elkaar horizontaal in het midden gezet.
  • Baseline: Flex-items staan zo dat de tekst op dezelfde lijn staat. Text staat ook met de onderkant op de lijn. Als er twee font groottes zijn is het verschil goed te zien. zijn er meerdere regels dan werkt baseline met de bovenste regel.
  • First baseline: Zelfde als baseline maar de tekst staat
  • Last baseline: verschil met first baseline zit in dat de flex-items aan de onderkant van de container komt. zijn er meerdere regels met tekst, dan werkt last baseline met de onderste regel. Let wel op vaste heights die kunnen buiten de container vallen.
.con {
   display:flex;
   background-color:red;
}


.item {
   align-self: auto / flex-start / flex-end / center / baseline / stretch / ect.;
   background-color:yellow;
}

align-items: center align-self: flex-start

align-items
align-self
align-items

align-items: center align-self: center

align-items
align-self
align-items

align-items: center align-self: flex-end

align-items
align-self
align-items

align-items: center align-self: stretch

align-items
align-self
align-items