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 belangrijkste property voor flex containers is display. Display bevat veel opties voor values zoals block, inline, table, grid ect. Maar de twee values die relevant zijn voor flexbox zijn flex en inline-flex.

• Flex: Hiermee creëer je een flex container en snappen 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 meest gebruiken.

<div class="con">
 flex-container flex
</div>

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

• Inline-flex: Doet hetzelfde als flex, alleen werkt het verder als een inline value element (Zet de container element langs elkaar met zijn siblings met breedte tot het einde van de content. height en width properties werken niet). Alleen is er een exceptie 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:flex;
   background-color:red;
}

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-items 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; 
}

• 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; 
}

• Column: zet 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; 
}

• Column-reserve: zet 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; 
}

Flex-wrap

Met de flex-wrap property kun je de flex-items op meerdere rijen 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 blijven op één lijn. Dit is standard.

<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%;
}

• 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%;
}

• Wrap-reverse: hetzelfde idee als bij flex-direction. Zet flex-items op meerdere rijen, maar dan van onder naar boven.

<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-reverse; 
   background-color:red;
}

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

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 horizontaal (main-axis) moeten staan 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 writing-mode properties.

• Flex-start: flex-items worden aan het begin van de flex-direction geplaatst. Als de container niet flex is dan gedraagt deze zich als start. Om het simpel te houden gebruik deze eerder dan start of left.
• Flex-end: plaatst de flex-items aan het einde van de flex-direction. Als de container niet flex is dan gedraagt deze zich als end. Om het simpel te houden gebruik deze 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.
• Left: Flex-items worden worden aan de linkerkant gezet van de container. als de horizontale axis niet parallel is met de inline axis zoals bij column gedraagt deze zich als start.
• Right: Flex-items worden worden aan de linkerkant gezet van de container. als de horizontale axis niet parallel 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;}

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

Row

Column

Midden / gespreid.

• Center: Flex-items worden bij elkaar horizontaal in het midden gezet.
• Space-between: Tussen de flex-items De overgebleven ruimte wordt verdeelt als gelijke 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 verdeelt 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-safety {
   display:flex;
   justify-content:safe center;
   background-color:red;
   width:400;
}

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

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

Column

Boven / beneden uitgelijnd

• 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.

<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

Column

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 hebben.

• Normal: dit is standard. Laat flex-items op de normale positie staan.
• Flex-start / 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; 
   
}

Row

Column

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>

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>

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-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

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; 
}

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; 
}