DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die order-Eigenschaft ist eine Untereigenschaft des Flexible Box Layout Moduls. Flex-Items werden standardmäßig in derselben Reihenfolge angezeigt, in der sie im Quelldokument erscheinen. Die order-Eigenschaft kann verwendet werden, um diese Reihenfolge zu ändern.
.elememt {
order: 3;
}Syntax
order: <number>Demo
Die folgende Demo zeigt, wie die Standardreihenfolge (1, 2, 3, 4, 5) durch Setzen der order-Eigenschaft für jedes Element geändert wurde.
Weitere Ressourcen
- CSS Flexible Box Layout Module Level 1
- MDN-Dokumentation
- Erweitertes Browser-übergreifendes Flexbox
- Ein Leitfaden zu Flexbox
- Verwendung von Flexbox
- Altes Flexbox und neues Flexbox
Browser-Unterstützung
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10 1 11 | 12+ | 20+ | 21-28 2 29+ | 7-8 2 9+ | 12.1+ |
| iOS Safari | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| 7-8.4 2 9+ | 92+ | 90+ | 92+ | 12.1+ |
- 1 Unterstützt mit Präfix
-ms- - 1 Unterstützt mit Präfix
-webkit-
Für weitere Informationen, wie man Syntaxen mischt, um die beste Browserunterstützung zu erhalten, siehe „Using Flexbox“ und diesen Artikel von DevOpera.
Hat jemand Erfahrungen mit den Auswirkungen auf SEO?
Es ist wichtig zu beachten, dass
ordernur seine Wirkung bei anderen geordneten Elementen entfaltet. Wenn ein Geschwisterelement nicht geordnet ist, werden diese Geschwister zuerst in der Reihenfolge, in der sie im DOM erscheinen, platziert.„order: -1“ hat bei mir funktioniert (wodurch ein Objekt an erster Stelle platziert wird).
Okay, stellen Sie sich vor, ich habe col-lg-8 und col-lg-4. Kann ich order: 1 bei col-lg-8 und order: 2 bei col-lg-4 initiieren???
Sie können stattdessen col-lg-pull-* und col-lg-push-* verwenden.