Visa källa för Flexbox - byta ordning

Vanligtvis placeras flexelement ut efter varandra, allteftersom de är angivna i HTML-koden. Detta är ju även beteendet som vanliga <code>div</code>-boxar har som standard. Men med flexbox kan man välja i vilken ordning saker ska läggas ut. Man använder sig då av <code>order</code>. 

== <code>order</code> ==
[[Fil:Order.png]]

Egenskapen tar ett heltal som parameter. Talet kan vara antingen positivt och negativt. De element som har lägst <code>order</code>-nummer kommer att placeras först, följt av de med allt högre <code>order</code>-nummer. Så de placeras alltså ut i stigande ordning, med start ifrån den lägst numrerade. 

Lägg märke till att man kan ha flera element som har samma <code>order</code>-nummer. De kommer då att placeras tillsammans som en grupp, där deras inbördes ordning bestäms av den ordning elementen dyker upp i HTML-koden. 

[http://exempel.webbling.se/flexbox8.html Exempel].
<codepen pen="pJXejR" height="300" tab="css,result">
</codepen>

== Varför skulle man vilja byta ordning? ==

Varför skulle man då vilja använda sig av detta? Låt säga att vi ha en sida som visas lite olika beroende på vilken storlek på skärmen slutanvändaren har. Vi kanske vill ha jättestor layout för den som sitter på desktopen på en PC, medan den som har en pytteliten telefonskärm ska se en koncisare vy. Låt säga att våra annonser ligger på sidorna om huvudmaterialet i PC-vyn, medan de ligger sist i telefonvyn. Vi kan då sätta upp CSS-regler som styr vilka boxar som ska hamna på vilken plats och med hjälp av <code>order</code> kan vi göra detta utan att behöva förändra HTML-koden på något vis!

== Nästa aktivitet ==
[[Flexbox - exempel]]

[[Category:Webbutveckling]]

__FORCETOC__