box-flex-group CSS property
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. Informationen über den aktuellen Standard finden Sie unter flexbox.
Die box-flex-group CSS Eigenschaft ordnet die Kind-Elemente des Flexbox-Layouts einer Flex-Gruppe zu.
Für flexible Elemente, die Flex-Gruppen zugewiesen sind, ist die erste Flex-Gruppe 1, und höhere Werte geben nachfolgende Flex-Gruppen an. Der Anfangswert ist 1. Beim Aufteilen des überschüssigen Platzes der Box berücksichtigt der Browser zunächst alle Elemente innerhalb der ersten Flex-Gruppe. Jedes Element innerhalb dieser Gruppe erhält zusätzlichen Platz basierend auf dem Verhältnis der Flexibilität dieses Elements im Vergleich zur Flexibilität anderer Elemente innerhalb derselben Flex-Gruppe. Wenn der Platz aller flexiblen Kinder innerhalb der Gruppe auf das Maximum vergrößert wurde, wird der Vorgang für die Kinder innerhalb der nächsten Flex-Gruppe wiederholt, wobei der verbleibende Platz von der vorherigen Flex-Gruppe verwendet wird. Sobald es keine weiteren Flex-Gruppen mehr gibt und immer noch Platz verbleibt, wird der zusätzliche Raum innerhalb der umschließenden Box gemäß der Eigenschaft box-pack aufgeteilt.
Wenn die Box nach Berechnung des bevorzugten Platzes der Kinder überlaufen würde, wird der Raum von flexiblen Elementen auf ähnliche Weise entfernt, wie er beim Hinzufügen zusätzlichen Raums eingesetzt wird. Jede Flex-Gruppe wird nacheinander geprüft, und der Raum wird entsprechend dem Flexibilitätsverhältnis jedes Elements entfernt. Elemente schrumpfen nicht unter ihre minimalen Breiten.
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>
<integer> =
<number-token>
Beispiele
Einfaches Anwendungsbeispiel
Im ursprünglichen Flexbox-Standard konnte box-flex-group verwendet werden, um Flex-Kinder verschiedenen Gruppen zuzuweisen, um 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 jemals in WebKit-basierten Browsern mit einem Präfix unterstützt, und in nachfolgenden Versionen der Spezifikation gibt es hierfür kein Äquivalent. Stattdessen wird die Verteilung des Raumes innerhalb des Flex-Containers jetzt mithilfe von flex-basis, flex-grow und flex-shrink behandelt.
Spezifikationen
Kein Teil eines Standards.