Effektiva ordningsändringar i Flexbox med CSS

I dagens handledning kommer vi att titta på en intressant övning om ämnet "Order" i Flexbox. Du kommer lära dig hur du kan omorganisera ordningen på element i en Flex-behållare på två olika sätt. Vi kommer att använda tillvägagångssätten med CSS-klasser samt flexbox-egenskapen flex-direction. Efter den här handledningen kommer du kunna förstå och effektivt implementera omordning av element. Nu kör vi!

Viktigaste insikter

• Du kan ändra ordningen på Flex-elementen med hjälp av order-egenskapen.
• Ett alternativt sätt att ordna elementen är genom att använda flex-direction-egenskapen, som låter dig ange ordningen.

Steg-för-steg handledning

För att ändra ordningen på innehållet i en Flex-behållare börjar vi med att skapa en enkel layout. Du kan ta ett HTML-dokument där fem div-element ingår som vi vill sortera om. Siffrorna i div-elementen representerar den aktuella ordningen från 5 till 1.

Första steget, öppna din HTML-fil och lägg till strukturen. Div-elementen bör markeras med klasserna L1, L2, L3, L4 och L5.

Efter att du har skapat den grundläggande strukturen, vill vi se till att elementens ursprungliga ordning är från vänster till höger från 5 till 1. Målet är att visa elementen i stigande ordning från 1 till 5.

För att uppnå detta, använd order-egenskapen i din CSS för varje element. Börja med att sätta order-värdena så att L1 får ordningen 5, L2 får 4, och så vidare tills L5 som har ordningen 1.

Efter att du har sparat dina ändringar och laddat om sidan i webbläsaren, bör du nu se elementen i rätt ordning från 1 till 5.

Det finns dock, som tidigare nämnts, två sätt att lösa denna uppgift. Det första sättet är att använda order-egenskapen som beskrivits ovan. Den andra metoden vi kommer att titta på nu använder flex-direction-egenskapen.

För att utforska andra alternativ, börja med att kommentera ut order-egenskaperna i din CSS-fil så att vi kan prova den nya metoden utan att förlora den föregående.

Nu kan du använda flex-direction-egenskapen för behållaren. Som standard är den inställd på rad. Vi ändrar den till rad-omvänd, vilket bör göra att elementens ordning inverteras.

Efter att ha ändrat flex-direction till rad-omvänd, spara din fil igen och ladda förhandsgranskningen i webbläsaren. Nu bör du se elementen i rätt ordning från 1 till 5 utan att behöva använda order-egenskapen.

En annan variant som du kan prova är att använda column-reverse för en vertikal ordning av elementen. Här sorteras layouten nerifrån och upp.

Nu bör du klart förstå de två metoderna för att ändra ordningen på Flex-element: order-egenskapen och flex-direction-egenskapen. Båda metoderna ger dig olika tillvägagångssätt för att anpassa visningen av ditt innehåll.

Sammanfattning

I den här handledningen har du lärt dig hur du kan manipulera ordningen på element i en Flex-behållare. Du känner nu till användningen av order-egenskapen och hur du kan anpassa flex-direction-egenskapen för att ändra visningen av dina element både horisontellt och vertikalt. Testa dessa metoder för att utveckla en bättre förståelse för Flexbox-layouter.