box-flex-group
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.
Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.
Warnung: Dies ist eine Eigenschaft des ursprünglichen Entwurfs des CSS Flexible Box Layout Moduls. Sie wurde in der Spezifikation ersetzt. Siehe flexbox für Informationen über den aktuellen Standard.
Die box-flex-group CSS Eigenschaft ordnet die Kind-Elemente des Flexbox-Containers einer Flex-Gruppe zu.
Für flexible Elemente, die Flex-Gruppen zugewiesen sind, ist die erste Flex-Gruppe 1 und höhere Werte bestimmen nachfolgende Flex-Gruppen. Der Anfangswert ist 1. Beim Verteilen des zusätzlichen Raums des Containers berücksichtigt der Browser zuerst alle Elemente innerhalb der ersten Flex-Gruppe. Jedes Element innerhalb dieser Gruppe erhält zusätzlichen Raum basierend auf dem Verhältnis der Flexibilität dieses Elements im Vergleich zur Flexibilität anderer Elemente innerhalb derselben Flex-Gruppe. Wenn der Raum aller flexiblen Kinder innerhalb der Gruppe auf das Maximum erhöht wurde, wiederholt sich der Vorgang für die Kinder innerhalb der nächsten Flex-Gruppe, wobei der übrig gebliebene Raum aus der vorherigen Flex-Gruppe verwendet wird. Sobald keine weiteren Flex-Gruppen mehr vorhanden sind und noch Raum übrig ist, wird der zusätzliche Raum innerhalb des umschließenden Containers entsprechend der box-pack Eigenschaft aufgeteilt.
Wenn der Container nach der Berechnung des bevorzugten Raums der Kinder überläuft, wird Raum von den flexiblen Elementen entfernt, ähnlich wie beim Hinzufügen von zusätzlichem Raum. Jede Flex-Gruppe wird der Reihe nach untersucht, und Raum wird gemäß dem Verhältnis der Flexibilität jedes Elements entfernt. Elemente schrumpfen nicht unter ihre Mindestbreiten.
Syntax
/* <integer> values */
box-flex-group: 1;
box-flex-group: 5;
/* Global values */
box-flex-group: inherit;
box-flex-group: initial;
box-flex-group: unset;
Die box-flex-group Eigenschaft wird als jede positive <integer> angegeben.
Formale Definition
| Anfangswert | 1 |
|---|---|
| Anwendbar auf | Flusskindelemente von Boxelementen |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
box-flex-group =
<integer>
Beispiele
Grundlegendes Anwendungsbeispiel
Im ursprünglichen Flexbox-Spezifikation konnte box-flex-group verwendet werden, um Flex-Kinder verschiedenen Gruppen zuzuweisen, um den flexiblen Raum zu verteilen:
article:nth-child(1) {
-webkit-box-flex-group: 1;
}
article:nth-child(2) {
-webkit-box-flex-group: 2;
}
Dies wurde nur in WebKit-basierten Browsern mit einem Präfix unterstützt, und in späteren Versionen der Spezifikation gibt es keine entsprechende Funktionalität. Stattdessen wird die Verteilung des Raums innerhalb des Flex-Containers jetzt mit flex-basis, flex-grow, und flex-shrink gehandhabt.
Spezifikationen
Kein Teil eines Standards.