order-Eigenschaft und visuelle Neuordnung
Ändern Sie mit der Eigenschaft order die visuelle Reihenfolge von Flex-Items, ohne das DOM zu verändern.
order-Eigenschaft und visuelle Neuordnung ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Die Eigenschaft order
Die Eigenschaft order ändert die visuelle Reihenfolge von Flex- und Grid-Elementen, ohne die DOM-Struktur zu verändern. Der Standardwert ist 0; höhere Werte erscheinen später, negative Werte früher.
Grundlagen von order
Elemente werden von der niedrigsten bis zur höchsten order-Zahl angezeigt. Elemente mit demselben order-Wert erscheinen in der Reihenfolge des DOM.
<div class="nav">
<span class="nav-button">Button</span>
<span class="nav-logo">Logo</span>
<span class="nav-links">Links</span>
</div>
Negative order-Werte
Verwenden Sie negative Werte, um ein Element vor allen Elementen mit dem Standardwert (order:0) zu platzieren:
<div class="list">
<div>Item 1</div>
<div class="sticky-first">Sticky</div>
<div>Item 2</div>
</div>
Responsive Neuanordnung
Ändern Sie die visuelle Reihenfolge an verschiedenen Breakpoints, ohne das HTML zu ändern:
<div class="layout">
<main class="main-content">Main</main>
<aside class="sidebar">Sidebar</aside>
</div>
Wichtig: Hinweis zur Barrierefreiheit
order ändert nur die visuelle Reihenfolge. Screenreader und Tastaturnavigation folgen der DOM-Reihenfolge, nicht der visuellen Reihenfolge. Für die Barrierefreiheit ist es entscheidend, die visuelle Reihenfolge zu ändern und gleichzeitig die logische Lesereihenfolge im DOM beizubehalten.
Inkonsistente Tab-Reihenfolge
Wenn Sie Elemente visuell mit order neu anordnen, folgt der Tastaturfokus beim Drücken der Tab-Taste der DOM-Reihenfolge, die von der visuellen Reihenfolge abweichen kann. Dadurch entsteht für Tastaturbenutzer eine verwirrende Navigation. Verwenden Sie die visuelle Neuanordnung nur, wenn sie die logische Reihenfolge nicht beeinträchtigt.
Häufige legitime Anwendungsfälle
Eine visuelle Neuanordnung ist akzeptabel, wenn:
- Die Elemente nicht Teil einer navigierbaren Reihenfolge sind (dekorative Anordnung)
- Die visuelle Reihenfolge einem natürlichen Lesefluss entspricht, der aus Gründen der Codeorganisation von der Quellreihenfolge abweicht
order in Flexbox und Grid
Die Eigenschaft order funktioniert in Flexbox und CSS Grid identisch. Sie steuert die Reihenfolge innerhalb des Layoutalgorithmus, nicht im DOM.
order mit Flex-Wrap
Wenn Elemente in neue Zeilen umgebrochen werden, bestimmt order, welche Elemente in welcher Zeile und in welcher Reihenfolge innerhalb der jeweiligen Zeile erscheinen.
Alle Elemente umkehren
Um alle Elemente umzukehren, verwenden Sie flex-direction: row-reverse oder column-reverse, anstatt für jedes Element einen negativen order-Wert festzulegen. Das ist semantischer und einfacher.
<div class="reversed-list">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Animation mit order
Änderungen an order können in CSS nicht animiert werden. Wenn Sie eine animierte Neuanordnung benötigen, verwenden Sie Transforms oder JavaScript-gesteuerte Animationen wie Flip.js oder das Flip-Plugin von GSAP.
Schnelltest
Warum sollte die Verwendung der Eigenschaft order zum Neuanordnen von Navigationslinks mit Vorsicht erfolgen?
Zusammenfassung
order ändert die visuelle Position von Flex- oder Grid-Elementen, ohne das HTML zu verändern. Der Standardwert ist 0; niedrigere Werte erscheinen zuerst, höhere zuletzt. Verwenden Sie die Eigenschaft zur responsiven Neuanordnung, ohne die DOM-Struktur zu ändern. Überprüfen Sie bei der Verwendung von order zur Neuanordnung immer, dass die Reihenfolge der Tastaturnavigation und der Screenreader logisch bleibt.
Häufig gestellte Fragen
Ist die Lektion „order-Eigenschaft und visuelle Neuordnung“ kostenlos?
Ja — der vollständige Text von „order-Eigenschaft und visuelle Neuordnung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „order-Eigenschaft und visuelle Neuordnung“?
Ändern Sie mit der Eigenschaft order die visuelle Reihenfolge von Flex-Items, ohne das DOM zu verändern. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „order-Eigenschaft und visuelle Neuordnung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Ausrichtung einzelner Flex-Items mit align-self überschreiben
- order-Eigenschaft und visuelle Neuordnung
- Muster für die Flex-Kurzschreibweise
- Gängige Flexbox-Layouts: Navigation, Karten, Media Object