box-flex-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 CSS-Flexible-Box-Layout-Modul-Entwurfs. Sie wurde in der Spezifikation ersetzt. Sehen Sie sich flexbox für Informationen über den aktuellen Standard an.
Die box-flex-group-CSS-Eigenschaft ordnet die Kindelemente des Flexbox-Containers einer Flex-Gruppe zu.
Für flexible Elemente, die Flex-Gruppen zugeordnet sind, ist die erste Flex-Gruppe 1, und höhere Werte spezifizieren nachfolgende Flex-Gruppen. Der anfängliche Wert ist 1. Beim Verteilen des zusätzlichen Platzes der Box 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 erhöht wurde, wiederholt sich der Prozess für die Kinder innerhalb der nächsten Flex-Gruppe, wobei der verbleibende Platz der vorherigen Flex-Gruppe verwendet wird. Sobald keine weiteren Flex-Gruppen mehr vorhanden sind und noch Platz übrig ist, wird dieser zusätzliche Platz innerhalb der enthaltenen Box gemäß der box-pack-Eigenschaft verteilt.
Wenn die Box nach der Berechnung des bevorzugten Platzes der Kinder überläuft, wird der zusätzliche Raum von den flexiblen Elementen in ähnlicher Weise entfernt, wie er beim Hinzufügen zusätzlichen Raums hinzugefügt wurde. Jede Flex-Gruppe wird der Reihe nach geprüft und der Raum wird entsprechend 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> spezifiziert.
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
Beispiel für grundlegende Verwendung
Im ursprünglichen Flexbox-Standard konnte box-flex-group verwendet werden, um Flex-Kinder verschiedenen Gruppen zuzuweisen, um flexiblen Raum 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 in WebKit-basierten Browsern mit einem Präfix unterstützt, und in späteren Versionen der Spezifikation gibt es dafür keine Entsprechung. Stattdessen wird die Verteilung des Raums innerhalb des Flex-Containers nun mit flex-basis, flex-grow und flex-shrink gehandhabt.
Spezifikationen
Kein Teil eines Standards.