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 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 geben nachfolgende Flex-Gruppen an. Der Anfangswert ist 1. Bei der Aufteilung 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 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 bis zum Maximum vergrößert wurde, wird der Prozess für die Kinder der nächsten Flex-Gruppe wiederholt, wobei der verbleibende Raum aus der vorherigen Flex-Gruppe verwendet wird. Sobald es keine weiteren Flex-Gruppen mehr gibt und noch Platz übrig ist, wird der zusätzliche Raum innerhalb der enthaltenen Box gemäß der box-pack-Eigenschaft aufgeteilt.
Wenn die Box nach Berechnung des bevorzugten Raums der Kinder überfüllt wäre, wird der Raum von flexiblen Elementen auf ähnliche Weise entfernt, wie er hinzugefügt wurde. Jede Flex-Gruppe wird nacheinander betrachtet und der Raum 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 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 Nutzungbeispiel
Im ursprünglichen Flexbox-Entwurf 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 auf WebKit basierenden Browsern mit einem Präfix unterstützt, und in späteren Versionen der Spezifikation hat diese Funktionalität kein Äquivalent. Stattdessen wird die Verteilung von Raum innerhalb des Flex-Containers nun mit flex-basis, flex-grow und flex-shrink gehandhabt.
Spezifikationen
Nicht Teil eines Standards.
Browser-Kompatibilität
Loading…