Rækkefølge - CSS-tricks

Anonim

Den orderegenskab er en sub-egenskab af Flexible Box layout modul.

Flex-emner vises i samme rækkefølge som de vises i kildedokumentet som standard. Den orderegenskab kan bruges til at ændre denne bestilling.

Syntaks

order: .flex-item ( order: 2; )

Demo

Følgende demo viser, hvordan standardordren (1, 2, 3, 4, 5) er blevet ændret ved at indstille ordreegenskaben til hver vare.

Tjek denne pen!

Browsersupport

  • (moderne) betyder den nylige syntaks fra specifikationen (f.eks. display: flex;)
  • (hybrid) betyder en ulige uofficiel syntaks fra 2011 (f.eks. display: flexbox;)
  • (gammel) betyder den gamle syntaks fra 2009 (f.eks. display: box;)
Chrome Safari Firefox Opera IE Android iOS
21+ (moderne)
20- (gamle)
3.1+ (gammel) 2-21 (gammel)
22+ (ny)
12.1+ (moderne) 10+ (hybrid) 2.1+ (gammel) 3.2+ (gammel)

Blackberry browser 10+ understøtter den nye syntaks.

For mere information om, hvordan man blander syntakser for at få den bedste browsersupport, henvises til denne artikel (CSS-Tricks) eller denne artikel (DevOpera).