Flexboks i CSS: Slik sorterer du elementer med Order og Reverse Direction

Det er viktig at brukergrensesnittet er intuitivt og tiltalende. En måte å oppnå dette på er å bruke Flexbox i CSS. Med Flexbox kan du ikke bare kontrollere justering og plassering av elementer i oppsettet, men også endre synlighet og rekkefølge på elementer uten å påvirke DOM (Document Object Model). I denne opplæringen vil vi ta en nærmere titt på CSS-egenskapen order, som lar deg endre rekkefølgen på Flexbox-elementer, samt bruken av flex-direction for å enkelt reversere visningsrekkefølgen på elementene.

Viktigste funn

• CSS-egenskapen order påvirker den synlige rekkefølgen av Flexbox-elementer.
• Endringer i rekkefølgen har ingen innvirkning på den opprinnelige rekkefølgen i DOM.
• Flexbox-retningen kan reverseres med flex-direction (f.eks. row-reverse) for å endre visningen.

Trinn-for-trinn veiledning

For å demonstrere hvordan order-egenskapen fungerer og muligheten til å reversere visningen med flex-direction, går vi gjennom følgende trinn:

1. Opprett Flexbox-grunnlag

Først må du forsikre deg om at beholderen din har Flexbox-egenskapene. For å gjøre dette, sett CSS-regelen display: flex; på beholderen din.

2. Forstå rekkefølgen av elementene i DOM

Sjekk den opprinnelige rekkefølgen av elementene i DOM-en din. Det er viktig å vite at standardrekkefølgen i DOM-en er grunnlaget som Flexbox-orden bygger på.

3. Bruk av Order-egenskapen

For å påvirke visningen av elementene, kan du sette order-egenskapen til negative verdier. Som standard har elementer verdien 0. Hvis du gir et element verdien -1, vil det visuelt flyttes fremover.

4. Påføre visuell sortering

Hvis du vil tilpasse det første elementet visuelt, må du merke deg følgende: Standardverdien for order-egenskapen er 0. For å vise et element før et annet, må du velge en mindre verdi. Tilordninger som -1, -2 eller til og med negative hundretall er mulige.

5. Gjøre flere tilpasninger

Endre order-verdiene på de gjenværende elementene. For eksempel, for å ha det andre elementet først, bør du merke det med -1 eller gi det en verdi mindre enn den nåværende order-verdien.

6. Bruke negativ Order-verdi

Hvis du bruker order-egenskapen til å endre rekkefølgen, blir den visuelle rekkefølgen sortert i stigende rekkefølge, der den minste verdien kommer først.

7. Reversere Flex-Direction

Et av de kraftigste verktøyene er egenskapen flex-direction. Hvis du setter denne til row-reverse, endres rekkefølgen for å vise fra høyre mot venstre. Se hvordan elementene ordner seg visuelt når du gjør denne endringen.

8. Endre rekkefølgen i motsatt retning

Hvis du bruker flex-direction: column;, vil oppsettet renderes ovenfra og ned. Et negativt order-attributt kan også brukes i dette tilfellet for å påvirke rekkefølgen.

9. Bruke på Skjermleser

Hvis du vil ta hensyn til den visuelle rekkefølgen for skjermleser, er det viktig å vite at skjermleser leser den opprinnelige DOM-rekkefølgen. Derfor er visuelle endringer med order ikke tilgjengelig for alle brukere.

Oppsummering

I denne veiledningen har du lært hvordan du kan bruke CSS-eiendommen order for å kontrollere synligheten og rekkefølgen av Flexbox-elementer. Du har også funnet ut hvordan du kan snu visningen med flex-direction for å gjøre layoutene dine enda mer fleksible og brukervennlige. Husk at visuelle tilpasninger i visningen ikke endrer den underliggende DOM-rekkefølgen, noe som bør tas hensyn til for tilgjengelighet.