Objednať - Triky CSS

Anonim

Táto ordervlastnosť je podvlastnosťou modulu Flexibilné usporiadanie schránky.

Položky Flex sa predvolene zobrazujú v rovnakom poradí, v akom sa vyskytujú v zdrojovom dokumente. Túto ordernehnuteľnosť je možné použiť na zmenu tohto poradia.

Syntax

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

Ukážka

Nasledujúca ukážka ukazuje, ako bolo zmenené predvolené poradie (1, 2, 3, 4, 5) nastavením vlastnosti objednávky pre každú položku.

Vyskúšajte toto pero!

Podpora prehľadávača

  • (moderný) znamená nedávnu syntax zo špecifikácie (napr. display: flex;)
  • (hybrid) znamená zvláštnu neoficiálnu syntax z roku 2011 (napr. display: flexbox;)
  • (staré) znamená starú syntax z roku 2009 (napr. display: box;)
Chrome Safari Firefox Opera IE Android iOS
21+ (moderný)
20- (starý)
3.1+ (staré) 2-21 (staré)
22+ (nové)
12.1+ (moderný) 10+ (hybridný) 2.1+ (staré) 3.2+ (staré)

Prehliadač Blackberry 10+ podporuje novú syntax.

Viac informácií o tom, ako kombinovať syntaxe s cieľom získať najlepšiu podporu prehľadávača, nájdete v tomto článku (CSS-triky) alebo v tomto článku (DevOpera).