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 Flexbox-Layouts. Sie wurde in der Spezifikation ersetzt. Sehen Sie sich flexbox für Informationen über den aktuellen Standard an.
Die box-flex-group CSS Eigenschaft weist die Kindelemente 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 spezifizieren nachfolgende Flex-Gruppen. Der Anfangswert ist 1. Wenn der zusätzliche Platz des Containers aufgeteilt wird, berücksichtigt der Browser zuerst 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 erweitert 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. Wenn es keine weiteren Flex-Gruppen gibt und noch Platz übrig ist, wird der zusätzliche Platz innerhalb des umschließenden Containers gemäß der box-pack-Eigenschaft aufgeteilt.
Wenn der Container überlaufen würde, nachdem der bevorzugte Platz der Kinder berechnet wurde, wird der Raum von flexiblen Elementen auf ähnliche Weise entfernt, wie er hinzugefügt wurde. Jede Flex-Gruppe wird der Reihe nach überprüft, und Platz wird entsprechend dem Verhältnis der Flexibilität 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 eine beliebige 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
Einfaches Anwendungsbeispiel
Im ursprünglichen Flexbox-Entwurf konnte box-flex-group verwendet werden, um Flex-Kinder verschiedenen Gruppen zuzuweisen, um flexiblen Platz zwischen ihnen 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 hat diese Funktionalität kein Äquivalent. Stattdessen wird die Verteilung des Platzes innerhalb des Flex-Containers nun mit flex-basis, flex-grow und flex-shrink gehandhabt.
Spezifikationen
Teil keiner Norm.
Browser-Kompatibilität
Loading…