Effektive rekkefølgeendringer i Flexbox med CSS

I dagens veiledning skal vi se på en interessant øvelse om emnet "Order" i Flexbox. Du vil lære hvordan du kan endre rekkefølgen på elementene i en Flex-beholder på to forskjellige måter. Vi vil bruke tilnærminger med CSS-klasser samt Flexbox-egenskapen flex-direction. Ved slutten av denne veiledningen vil du være i stand til å forstå og effektivt implementere rekkefølgen på elementer. La oss komme i gang!

Viktigste funn

• Du kan endre rekkefølgen på Flex-elementer ved hjelp av order-egenskapen.
• En alternativ metode for å ordne elementene er å bruke flex-direction-egenskapen, som lar deg spesifisere rekkefølgen.

Trinn-for-trinn veiledning

For å endre rekkefølgen av innholdet i en Flex-beholder, starter vi med å opprette et enkelt layout. Du kan ta et HTML-dokument der fem div-elementer er inkludert som vi ønsker å sortere. Tallene i div-elementene representerer den gjeldende rekkefølgen fra 5 til 1.

I det første steget åpner du HTML-filen din og setter inn strukturen. Div-elementene bør være merket med klassene L1, L2, L3, L4, og L5.

Når du har satt den grunnleggende strukturen, vil vi sørge for at startrekkefølgen til elementene er fra venstre til høyre fra 5 til 1. Målet er å vise elementene i stigende rekkefølge fra 1 til 5.

For å oppnå dette, bruk order-egenskapen i CSS-en din for hvert element. Start med å sette order-verdiene slik at L1 får rekkefølgen 5, L2 får 4, og så videre til L5 som har rekkefølgen 1.

Når du har lagret endringene i nettleseren og lastet siden på nytt, bør du nå se elementene i riktig rekkefølge fra 1 til 5.

Det finnes imidlertid, som nevnt tidligere, to måter å løse denne oppgaven på. Den første metoden er å bruke order-egenskapen som beskrevet ovenfor. Den andre metoden vi vil nå se på, bruker flex-direction-egenskapen.

For å utforske andre alternativer, kommenter ut order-egenskapene først i CSS-filen din, slik at vi kan prøve den nye metoden uten å miste den gamle.

Nå kan du bruke flex-direction-egenskapen for beholderen din. Standardinnstillingen er row. Vi endrer dette til row-reverse, noe som skal få elementene til å vise seg i omvendt rekkefølge.

Etter at du har endret flex-direction til row-reverse, lagrer du filen på nytt og laster forhåndsvisningen i nettleseren. Nå bør du se elementene i riktig rekkefølge fra 1 til 5, uten å måtte bruke order-egenskapen.

En annen måte du kan prøve, er å bruke column-reverse for vertikal ordning av elementene. Dette vil sortere oppsettet nedenfra og opp.

Nå skal du tydelig forstå de to metodene for å endre rekkefølgen på Flex-elementer: order-egenskapen og flex-direction-egenskapen. Begge metodene gir deg forskjellige tilnærminger for å tilpasse visningen av innholdet ditt.

Oppsummering

I denne veiledningen har du lært hvordan du kan manipulere rekkefølgen på elementer i en Flex-beholder. Du kjenner nå til bruken av order-egenskapen og hvordan du kan tilpasse flex-direction-egenskapen for å endre visningen av elementene dine både horisontalt og vertikalt. Eksperimenter med disse tilnærmingene for å utvikle en bedre forståelse for Flexbox-layouter.