Een uitgebreide handleiding voor Flexbox-uitlijning

Afstemming is waarschijnlijk het meest verwarrende aspect van flexbox. De lay-outmodule van de flexbox heeft een handvol uitlijningseigenschappen die zich onder verschillende omstandigheden anders gedragen en bij het gebruik ervan begrijpt u niet noodzakelijk wat er aan de hand is of waarom. Als u echter weet waar u op moet letten, is afstemming minder gecompliceerd dan het eerst verschijnt. Deze tutorial helpt je de flexbox-uitlijning perfect te begrijpen.

Een verhaal van twee assen

Bij het gebruik van flexbox werken we met twee assen: de hoofd en kruis assen. Zoals hun namen suggereren, vormen deze assen een hiërarchische relatie, waarbij de hoofdas superieur is aan de dwarsas. 

De dwarsas staat altijd loodrecht op de hoofdas. 

Deze hiërarchische relatie vormt het grootste verschil tussen flexbox en CSS-rasterlay-out. CSS-raster heeft per ontwerp twee niet-hiërarchische assen: de rij- en kolomassen. Dit komt omdat de makers van webstandaarden bedoeld CSS-raster worden gebruikt als een tweedimensionaal lay-outmodel. Flexbox heeft daarentegen één primaire en één secundaire as, omdat het een eendimensionaal lay-outmodel moet zijn. Het leuke aan de flexbox is dat je de richting van die ene dimensie kunt bepalen door de positie van de hoofdas in te stellen, daarom kun je zowel rijgebaseerde als kolomgebaseerde lay-outs maken.

Om te voorkomen dat je in de war raakt door uitlijneigenschappen, moet je er altijd rekening mee houden dat wanneer je flexbox gebruikt, je met een eendimensionaal model werkt. Zelfs als uw lay-out eruitziet alsof deze twee dimensies heeft (dat wil zeggen rijen en kolommen), kunnen flexitems slechts in één richting langs de hoofdas stromen. U kunt de flexitems in die ene richting rechtvaardigen en de afstand tussen de afzonderlijke items langs de dwarsas uitlijnen.

Begin met het definiëren van de hoofdas

De richting van de hoofdas wordt bepaald door de eigenschap flex-direction - er zijn vier mogelijke waarden:

1. flex-richting: rij; - hoofdas loopt van links naar rechts (dit is de standaard)
   
2. flex-richting: rij-achteruit; - hoofdas loopt van rechts naar links
3. flex-richting: kolom; - hoofdas loopt van boven naar beneden
4. flex-richting: kolom-omgekeerd; - hoofdas loopt van beneden naar boven

Laten we kijken hoe dit eruit ziet in de browser. Ik gebruik heel eenvoudige HTML-opmaak, slechts negen vakken op elkaar gestapeld:

 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 

De buitenste div met de .houder klasse zal de flex container zijn en de innerlijke divs met de .item klasse zal de flex items zijn.

1. Van links naar rechts: rij

Zoals vermeld, is de standaard flexrichting rij; als u niets anders instelt, is dit de gebruikte waarde. Zoals je hieronder kunt zien, heb ik alleen flexbox-gerelateerde eigenschappen aan de flexcontainer toegevoegd. Flex-items hebben enkele eigenschappen gekregen voor decoratieve doeleinden:

.container weergave: flex; flex-wrap: wrap; flex-richting: rij; 

Wanneer flex-richting is rij, de hoofdas loopt horizontaal, van links naar rechts. Dit is dus de richting waarlangs flexitems worden aangelegd. De dwarsas loopt loodrecht, van boven naar beneden, en wanneer items worden gewikkeld, doen ze dit in deze richting.

2. Rechts naar links: rij achteruit

Wanneer flexrichting de waarde wordt gegeven row-reverse, de positie van de assen blijft hetzelfde, wat betekent dat de hoofdas nog steeds horizontaal loopt en de dwarsas verticaal. Echter, de rij richting wordt omgekeerd: van rechts naar links langs de hoofdas. 

.container weergave: flex; flex-wrap: wrap; flex-richting: rij-achteruit; 

Als u kijkt naar de nummering van de flexitems, kunt u nu zien dat elke rij van rechts naar links is genummerd, maar de items lopen nog steeds verticaal naar beneden.

Als u ook de richting van de dwarsas wilt omkeren, moet u deze gebruiken wrap-reverse op de flex-wrap eigendom. Zoek het verschil:

3. Van boven naar beneden: kolom

Wanneer de flex-richting ingesteld op kolom, de hoofd- en dwarsassen veranderen van positie. De hoofdas loopt verticaal (van boven naar beneden) en de dwarsas loopt horizontaal (van links naar rechts).

.container weergave: flex; flex-wrap: wrap; flex-richting: kolom; maximale hoogte: 35rem; / * zodat items in de wrap * /

Nu zie je dat de nummering van flexitems niet volgt op rijen, maar op kolommen. Dit is waar het eendimensionale karakter van flexbox waarschijnlijk het meest zichtbaar is. De items worden alleen verpakt als de container een vaste hoogte heeft.

4. Onderkant naar boven: kolom achteruit

Ik verwacht dat je hier een patroon ziet ontwikkelen. Wanneer flex-richting ingesteld op column-reverse, de hoofdas is nog steeds verticaal en de dwarsas is nog steeds horizontaal, net zoals we in het vorige voorbeeld zagen. De kolomrichting is echter omgekeerd, zodat de hoofdas van onder naar boven wijst. 

.container weergave: flex; flex-wrap: wrap; flex-richting: kolom-omgekeerd; maximale hoogte: 35rem; / * zodat items in de wrap * /

Zoals u hieronder kunt zien, begint de nummering van flexitems onderaan links, naar boven en naar rechts.

Nogmaals, om de richting van de dwarsas te veranderen, moet je gebruiken wrap-reverse op de flex-wrap eigendom.

Flex-flow steno

De flex-flow eigendom is een afkorting voor flex-richting en flex-wrap. U kunt bijvoorbeeld gebruiken:

flex-flow: kolomomwikkeling;

in plaats van:

flex-richting: kolom; flex-wrap: wrap;

Flexbox uitlijningseigenschappen

Flexbox-uitlijning kan plaatsvinden langs zowel de hoofdas als de dwarsas.

Een van de eigenschappen (rechtvaardigen-inhoud) behoort tot de hoofdas, terwijl de andere drie (uitlijnen-items, uitlijnen-zelf, uitlijnen-inhoud) behoren tot de dwarsas. 

Zoals je zou verwachten, hangt het gedrag van de uitlijningseigenschappen af ​​van de eigenschap van de flexrichting. Bijvoorbeeld, rechtvaardigen-inhoud lijnt de items horizontaal uit als flex-richting is rij of row-reverse, maar verticaal als flex-richting is kolom of column-reverse. Dit is de echte schoonheid van een flexibele doos.

Afstemming langs de hoofdas

De eigenschap justify-content lijnt flexitems uit in de flexcontainer langs de hoofdas. Het verdeelt de extra ruimte die overblijft nadat de browser de benodigde ruimte voor alle items in de flexcontainer heeft berekend. De eigenschap justify-content kan vijf waarden aannemen:

1. flex-start - flexitems worden verantwoord naar het begin van de hoofdas (dit is de standaard)
   
2. flex-end - flexitems zijn verantwoord aan het einde van de hoofdas
   
3. centrum - flexitems worden om het midden van de hoofdas gematigd
   
4. ruimte tussen - Flex-items worden gelijkmatig verdeeld langs de hoofdas, van flex-start tot flex-end
   
5. ruimte-around - Flex-items worden gelijkmatig verdeeld langs de hoofdas, maar aan elk uiteinde worden spaties van halve grootte toegevoegd

Gebruiken rechtvaardigen-inhoud als je goed bent, moet je aandacht besteden aan de richtingen van je assen. Bijvoorbeeld, de justify-content: flex-start; regel knijpt altijd flexitems naar het begin van de hoofdas. Dit is het linker uiteinde wanneer flex-richting is rij, het goede einde wanneer het is row-reverse, het bovenste punt waarop het is kolom, en het onderste punt wanneer het is column-reverse.

De volgende pen laat zien hoe de verschillende waarden van de rechtvaardigen-inhoud eigenschap aligneert flex-items wanneer flex-richting is rij.

Afstemming langs de dwarsas

Tijd om dingen naar een hoger niveau te tillen. Je kunt gebruiken drie CSS-eigenschappen om items langs de dwarsas uit te lijnen. Twee van hen (uitlijnen-items en uitlijnen-zelf) zijn voor uitlijning met één regel, terwijl uitlijnen-inhoud is voor uitlijning met meerdere regels.

Single-Line Alignment

De uitlijnen-items en uitlijnen-zelf eigenschappen bepalen hoe ruimte wordt verdeeld tussen flexitems langs de dwarsas. In feite doen beiden hetzelfde, maar terwijl uitlijnen-items lijnt alle items in de flexcontainer uit, uitlijnen-zelf vervangt deze standaarduitlijning voor individuele flexitems. 

Beide kunnen de volgende waarden aannemen: 

1. auto - zorgt ervoor dat de eigenschap align-self de waarde van align-items erven (standaard voor align-self)
   
2. flex-start -  flexitems worden uitgelijnd in de richting van het begin van de dwarsas
   
3. flex-end - flexitems worden uitgelijnd tegen het einde van de dwarsas
   
4. centrum - Flex-items worden uitgelijnd rond het midden van de dwarsas
   
5. basislijn - flexitems worden zodanig uitgelijnd dat hun basislijnuitlijning op één lijn ligt
   
6. uitrekken - flexitems worden uitgerekt langs de dwarsas om de flexcontainer te vullen (standaard voor align-items)
   

De onderstaande pen laat zien hoe het uitlijnen-items en uitlijnen-zelf eigenschappen gedragen zich wanneer flex-richting is rij. De dwarsas loopt standaard van boven naar beneden. De items hebben verschillende hoeveelheden padding om hun hoogtes en basislijnen te wijzigen. U kunt bijvoorbeeld de flex-start waarde lijnt de items uit naar het begin van de dwarsas, terwijl flex-end lijnt ze uit naar het einde.

Natuurlijk wanneer flex-richting is kolom of column-reverse, je zult met een op kolommen gebaseerde layout werken, dus de uitlijnen-items en uitlijnen-zelf eigenschappen zullen items in plaats daarvan horizontaal uitlijnen.

Uitlijning met meerdere regels

De eigenschap align-content maakt uitlijning langs meerdere lijnen mogelijk langs de dwarsas. Het bepaalt hoe flexibele items in meerdere regels op afstand van elkaar staan. De eigenschap align-content heeft geen effect op een flex-container met één regel (bijvoorbeeld wanneer de inhoud niet wordt ingepakt). Het kan zes verschillende waarden aannemen: 

1. flex-start - flexitems worden uitgelijnd op het begin van de dwarsas
   
2. flex-end - flexitems worden uitgelijnd op het einde van de dwarsas
   
3. centrum - Flex-items worden uitgelijnd rond het midden van de dwarsas
   
4. ruimte tussen - Flex-items worden gelijkmatig verdeeld langs de dwarsas, tussen flexstart en flex-einde
5. ruimte-around - Flex-items worden gelijkmatig verdeeld langs de dwarsas, maar aan elk uiteinde worden spaties van halve grootte toegevoegd
6. uitrekken - flexitems worden uitgerekt langs de dwarsas om de flexcontainer te vullen (dit is de standaard)
   

Hieronder ziet u verschillende pennen die laten zien hoe de verschillende waarden van de uitlijnen-inhoud onroerend goed werk. Net als bij onze andere demo's zijn de standaard asrichtingen van toepassing. 

Deze eerste twee voorbeelden hebben geen eigenschap met één regel (uitlijnen-items) gedefinieerd, zodat u zult merken dat alle items standaard strekken. In dit volgende voorbeeld stellen we in align-items: flex-start; zodat de items aligneer naar het begin van de dwarsas, maar we zullen instellen align-content: flex-end; zodat de inhoud is uitgelijnd aan het einde van de as:

Als je alles hebt begrepen wat we tot nu toe hebben doorstaan, heb je het heel goed gedaan! U hebt nu een solide basiskennis van flexbox-uitlijning.

Conclusie

Werden gedaan! Om samen te vatten; het belangrijkste om te onthouden is dat je de aanwijzingen van de hoofd- en dwarsassen in gedachten moet houden. Begin altijd met uitlijnen door het instellen van de flex-richting eigendom. Om meer te weten te komen over flexbox-afstemming en uw kennis in de praktijk te brengen, kunt u ook de volgende bronnen bekijken:

• Officiële W3C-documenten voor flexboxuitlijning Zwaar doorlopend, maar nuttig lezen; ook de go-to-docs voor flexbox.
• Items in een flexcontainer uitlijnen Een MDN-documentpagina met interactieve demo's en codevoorbeelden.
• Flexbox Cheatsheet door Joni Trythall Een nette PDF-cheat-sheet voor downloaden, met druiven, peren en sinaasappels.
  
• Flexbox Froggy Een online spel om flexbox te leren, met kikkers en waterlelies. Als je intuïtief de flexbox-uitlijning wilt gebruiken, probeer dit spel dan (je kunt alles oefenen wat we in deze tutorial hebben behandeld).