Een uitgebreide gids voor het bestellen en herschikken van flexboxen

Met de lay-outmodule van de flexbox kunnen we flexitems in elke volgorde en richting uitzetten. Flexbox-ordening is in feite gemakkelijker dan bestellen met drijvers of een CSS-raster, zelfs als u dit in eerste instantie misschien niet denkt. Omdat flexbox een eendimensionaal lay-outmodel is, hoeft u, in tegenstelling tot een tweedimensionaal CSS-raster, slechts op één richting te letten. De regels zijn ook duidelijk gedefinieerd door W3C, zodat u niet hoeft te doen met de gebruikelijke puinhoop van drijvers en clearfixes.

Door deze handleiding te lezen, leert u hoe u de volgende flexbox-eigenschappen kunt gebruiken voor besteldoeleinden:

• flex-richting
• flex-wrap
• flex-flow
• bestellen

Bestel Vs. nabestelling

Wanneer we het hebben over het bestellen van flexbox, moeten we het verschil duidelijk maken bestellen en herordening. 

Wat is bestellen?

Wanneer we een flexbox-lay-out instellen, moeten we eerst de bron definiëren bestellen, wat betekent dat we moeten beslissen hoe de assen van de flexcontainer worden gepositioneerd. Ik heb uitgebreid geschreven over hoe flexbox-assen in mijn gids werken over flexbox-uitlijning.

Kort gezegd heeft elke flexcontainer twee assen: de hoofdas en de dwarsas. De hoofdas heeft één van de vier richtingen en de dwarsas staat altijd loodrecht op die:

1. van links naar rechts
2. rechts naar links
3. boven naar beneden
4. van onder tot boven

De dwarsas staat altijd loodrecht op de hoofdas. 

We zetten de hoofdas op met de flex-richting eigendom, bepalen we vervolgens hoe flexartikelen worden ingepakt, met behulp van de flex-wrap eigendom. Deze twee eigenschappen bepalen hoe de browser de items in de flexcontainer uitzet.

Dus wat is herschikken?

Met Flexbox kunnen we de standaardbronvolgorde ook effectief manipuleren herordening, met behulp van de bestellen eigendom. Herordenen houdt in dat we de visuele weergave van de items wijzigen, terwijl de bronvolgorde intact blijft. 

Als we de herschikkingsmogelijkheden van flexbox gebruiken, hoeven we de structuur van het HTML-document niet alleen te wijzigen voor visuele weergave. Gebruikers van schermlezers (en zoekmachines) kunnen de inhoud dus op een logisch gestructureerde manier krijgen (de zijbalk heeft bijvoorbeeld geen voorrang op de hoofdinhoud). 

Flexbox Bestellen

Het bestellen van een Flexbox gebeurt met de flex-direction en flex-wrap eigenschappen. Flex-richting specificeert de richting van de hoofdas. Het kan de volgende waarden aannemen:

1. rij (standaard) hoofdas: van links naar rechts
2. row-reverse hoofdas: van rechts naar links
3. kolom hoofdas: van boven naar beneden
4. column-reverse hoofdas: van onder naar boven

Flex-wrap bepaalt of flexitems in één regel worden opgemaakt of op meerdere regels worden gewikkeld. Het controleert ook de richting van de dwarsas. Het kan drie waarden hebben:

1. nowrap (standaardinstelling) geeft flexitems op één regel op; de dwarsas staat in de standaardpositie
2. wikkelen legt flexitems in meerdere regels vast; de dwarsas staat in de standaardpositie
3. wrap-reverse legt flexitems in meerdere regels vast; de dwarsas is omgekeerd

De standaardpositie van de dwarsas is:

• van boven naar beneden in geval van rij en row-reverse
• van links naar rechts in geval van kolom en column-reverse

In mijn vorige artikel over flexbox-uitlijning vindt u vier gedetailleerde voorbeelden (met demo's) over hoe u de hoofdas in vier verschillende richtingen kunt opstellen met behulp van flex-richting. Bij het bespreken van flexbox-ordening, denk ik echter dat het belangrijker is om te weten hoe het te gebruiken flex-richting en flex-wrap eigenschappen samen om de bronbestelling te bereiken waarnaar we op zoek zijn.

Voorbeeld van een snelle code

We zullen een eenvoudig codevoorbeeld gebruiken om te zien hoe flexbox-ordening werkt. De HTML hier bestaat uit slechts een paar divs:

 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 

De .houder div zal de flex container zijn en de divs met de .item klasse zal de flex items zijn. We gebruiken (bijna) dezelfde CSS in alle voorbeelden, alleen de flex-richting en flex-wrap eigenschappen zullen veranderen. Dit is hoe onze CSS eruit ziet met de rij en wikkelen waarden:

html background: # fff7f6;  .container weergave: flex; flex-richting: rij; flex-wrap: wrap;  .item font-size: 2rem; regelhoogte: 1; text-align: center; opvulling: 3rem; achtergrond: mistyrose; rand: 3px vaste tomaat; kleur: tomaat; marge: 6px; 

Hier is hetzelfde voorbeeld in een CodePen-demo:

Bestellen bij Rij en Kolom

Nu hebben we het echt interessante gedeelte bereikt! Het is niet zo moeilijk om de theorie van flexbox-ordening te begrijpen, maar het gebruik ervan in de praktijk kan zeker een uitdaging zijn. Dit gebeurt omdat het moeilijk is om zien hoe verschillende variaties van flex-richting en flex-wrap vergelijken met elkaar.

In de ingesloten pen hieronder kunt u zien hoe het flex-richting: rij en flex-richting: kolom lay-outs werken samen met verschillende waarden van de flex-wrap eigendom. Gebruik de formulierbesturingselementen om verschillende combinaties te bekijken.

Zoals je kunt zien, wanneer flex-richting is rij, flexitems worden horizontaal van links naar rechts opgemaakt. Wanneer we gebruiken wrap-reverse in plaats van wikkelen, flexbox begint met het opmaken van de items uit de bodem, in plaats van van de top. Dit gebeurt omdat wrap-reverse keert de richting van de dwarsas om.

Wanneer flex-richting is kolom, items worden verticaal neergelegd, van boven naar beneden. En, wanneer we gebruiken wrap-reverse in plaats van wikkelen, flexbox begint met het opmaken van de items uit de rechts (nu is dit het startpunt van de dwarsas), in plaats van van de links.

Bestellen bij row-reverse en column-reverse

Laten we nu eens kijken hoe flexbox items uitzet wanneer flexrichting is row-reverse en column-reverse.

Zoals je in de bovenstaande demo kunt zien, begint flexbox de items vanaf het begin van de hoofdas in beide gevallen, net als voorheen. De hoofdas van de row-reverse layout loopt van rechts naar links, dus flexbox begint met het opmaken van de items van rechts. En, de hoofdas van de column-reverse layout loopt van van onder tot boven, dus items beginnen te stromen vanaf de onderkant van de flexcontainer.

Wanneer we gebruiken flex-wrap: wrap, flexbox begint de items uit de top wanneer flex-richting is row-reverse en van de links wanneer het column-reverse, omdat dit de startpunten zijn van de dwarsas in de respectieve gevallen.

Wanneer we de wikkelrichting omdraaien naar flex-wrap: wrap-reverse, de dwarsas loopt in de tegenovergestelde richting. Het zal wijzen van van onder tot boven wanneer flex-richting is row-reverse, en van rechts naar links wanneer het column-reverse.

Speed ​​Things Up met de flex-flow steno

CSS heeft ook een coole afkorting voor de flex-richting en flex-wrap eigenschappen. Het wordt flex-flow genoemd. Om het te gebruiken, moeten we de twee eigenschappen achter elkaar op de volgende manier weergeven:

.container-1 flex-flow: rij wrap;  .container-2 flex-flow: kolom-reverse wrap-reverse; 

Flexbox opnieuw ordenen

Het is tijd om de dingen een beetje anders te bekijken. 

De eigenschap order wijzigt de standaardvolgorde van flexitems die we definiëren flex-richting en flex-flow. Het heeft alleen invloed op de visuele weergave van de items, dus het heeft geen invloed op de manier waarop schermlezers en andere niet-CSS user-agents de broncode lezen.

In tegenstelling tot de eerder genoemde eigenschappen, gebruiken wij bestellen op de flex items, in plaats van de flex houder. Het kan elke gehele waarde aannemen en de standaardwaarde is 0.

Het volgende voorbeeld beweegt .punt-3 naar het startpunt van de hoofdas. Omdat alle items 0 als standaardwaarde hebben, volstaat het om de volgorde: -1 regel om het het eerste item in de container te maken:

.item-3 order: -1; 

Je zult merken dat we dezelfde logica kunnen gebruiken om te bewegen .punt-3 naar het einde van de hoofdas. We hoeven alleen maar een positief te definiëren bestellen waarde voor het.

Natuurlijk kunnen we zo veel van deze flexitems opnieuw ordenen als we willen (hoewel je in gedachten houdt dat het opnieuw ordenen van alles waarschijnlijk niet de meest toegankelijke beslissing is die ooit is gemaakt). De bestellen eigenschappen van de verschillende flexitems zijn altijd relatief ten opzichte van elkaar. Hieronder kunt u zien hoe u meerdere items in de flexcontainer opnieuw kunt rangschikken.

.item-3 order: -1;  .item-4 order: -2;  .item-5 order: 2;  .item-7 order: 1; 

Bestellen en toegankelijkheid

Het belangrijkste om te begrijpen over dit alles is dat het bestellen eigenschap heeft geen invloed op de opdrachten voor schilderen, spreken en opeenvolgende navigatie. Dit betekent dat wanneer we de volgorde van onze flexitems wijzigen, gebruikers van niet-visuele media de wijzigingen niet zullen ervaren. Mensen die afhankelijk zijn van toetsenbordnavigatie, zullen bijvoorbeeld nog steeds door de koppelingen in de oorspronkelijke bronvolgorde bladeren.

Dit flexbox-gedrag kan in sommige gevallen van pas komen. Het is bijvoorbeeld mogelijk om de zogenaamde "Holy Grail Layout" toegankelijk te maken met behulp van flexbox-ordening. De lay-out Heilige Graal is de populaire bloglayout met een koptekst, een voettekst en twee zijbalken: één aan de linkerkant en één aan de rechterkant van de hoofdinhoud. 

In deze lay-out plaatsen we meestal de linkerzijbalk voor de belangrijkste inhoud in de HTML-code. Vanuit het oogpunt van toegankelijkheid moeten gebruikers van ondersteunende technologieën echter eerst de belangrijkste inhoud tegenkomen. Flexbox is hier perfect voor. We kunnen de hoofdinhoud vóór de twee zijbalken in onze opmaak plaatsen. Vervolgens hoeven we alleen de zijbalk en de hoofdinhoud in de juiste positie te plaatsen met behulp van de bestellen eigendom:

.zijbalk links order: 1;  artikel order: 2;  .sidebar-right order: 3; 

Flexbox- & schrijfmodi

Alles wat in deze tutorial wordt gezegd, is van toepassing op de LTR-schrijfmodus (van links naar rechts). Flexbox-assen volgen feitelijk de schrijfrichting van het document, die kan worden ingesteld met de richting en de eigenschappen van de schrijfmodus. Dit is de reden waarom in de LTR-schrijfmodus de hoofdas van links naar rechts loopt wanneer flex-richting is rij. In de RTL-schrijfmodus werkt het in de tegenovergestelde richting, van rechts naar links, en de rest verandert overeenkomstig.

Dat is een (Flex) Wrap!

Deze tutorial was het tweede deel van mijn flexbox-serie. Zorg ervoor dat u het eerste deel leest over flexboxuitlijning, om te leren hoe u flexitems langs de hoofd- en dwarsassen uitlijnt. Als u meer wilt weten over het bestellen van flexbox, heeft MDN ook een zeer informatief artikel over dit onderwerp. 

Kom meer te weten