box-ordinal-group CSS property
Deprecated
Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Warnung: Dies ist eine Eigenschaft des ursprünglichen Entwurfs des CSS-Flexbox-Layout-Moduls. Sie wurde in der Spezifikation ersetzt. Informationen über den aktuellen Standard finden Sie im flexbox.
Die box-ordinal-group CSS-Eigenschaft ordnet die Kind-Elemente des Flexbox einer Ordinalgruppe zu.
Ordinalgruppen können in Verbindung mit der box-direction-Eigenschaft verwendet werden, um die Reihenfolge zu steuern, in der die direkten Kinder eines Blocks erscheinen. Wenn die berechnete box-direction normal ist, zeigt ein Block seine Elemente beginnend mit der niedrigst nummerierten Ordinalgruppe an und stellt sicher, dass diese Elemente links (für horizontale Blöcke) oder oben (für vertikale Blöcke) im Container erscheinen. Elemente mit derselben Ordinalgruppe fließen in der Reihenfolge, in der sie im Quelldokumentbaum erscheinen. In der umgekehrten Richtung werden die Ordinalgruppen in derselben Reihenfolge geprüft, außer dass die Elemente umgekehrt erscheinen.
Syntax
/* <integer> values */
box-ordinal-group: 1;
box-ordinal-group: 5;
/* Global values */
box-ordinal-group: inherit;
box-ordinal-group: initial;
box-ordinal-group: unset;
Die box-ordinal-group-Eigenschaft wird als jede positive <integer> angegeben.
Formale Definition
| Anfangswert | 1 |
|---|---|
| Anwendbar auf | Kindelemente von Boxelementen |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
box-ordinal-group =
<integer>
<integer> =
<number-token>
Beispiele
Einfaches Anwendungsbeispiel
In einer älteren Version der Spezifikation wurde box-ordinal-group aufgenommen, um die Anzeigereihenfolge von Flex-Kindern innerhalb eines Flex-Containers zu ändern:
article:nth-child(1) {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
article:nth-child(2) {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
}
Das moderne Flexbox-Äquivalent ist order.
Spezifikationen
Nicht Teil eines Standards.