box-flex-group

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

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 originalen CSS Flexible Box Layout Modul Entwurfs. Sie wurde in der Spezifikation ersetzt. Siehe Flexbox für Informationen über den aktuellen Standard.

Die box-flex-group CSS Eigenschaft weist die Kindelemente der Flexbox einer Flexgruppe zu.

Für flexible Elemente, die Flexgruppen zugewiesen sind, ist die erste Flexgruppe 1 und höhere Werte spezifizieren nachfolgende Flexgruppen. Der Anfangswert ist 1. Beim Aufteilen des zusätzlichen Platzes der Box berücksichtigt der Browser zuerst alle Elemente innerhalb der ersten Flexgruppe. 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 Flexgruppe. Wenn der Platz aller flexiblen Kinder innerhalb der Gruppe bis zum Maximum erhöht wurde, wird der Vorgang für die Kinder in der nächsten Flexgruppe wiederholt, indem jeglicher Restplatz von der vorherigen Flexgruppe verwendet wird. Sobald es keine weiteren Flexgruppen gibt und noch Platz übrig ist, wird der zusätzliche Raum innerhalb der umgebenden Box gemäß der box-pack Eigenschaft verteilt.

Wenn die Box nach Berechnung des bevorzugten Raums der Kinder überlaufen würde, wird dann Platz von flexiblen Elementen entfernt, ähnlich wie beim Hinzufügen von zusätzlichem Platz. Jede Flexgruppe wird der Reihe nach untersucht und Platz wird entsprechend dem Verhältnis der Flexibilität jedes Elements entfernt. Elemente schrumpfen nicht unter ihre minimalen Breiten.

Syntax

css

/* <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 positiver <integer> angegeben.

Offizielle Definition

Anfangswert	`1`
Anwendbar auf	Flusskindelemente von Boxelementen
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Offizielle Syntax

box-flex-group =
  <integer>

Beispiele

Einfaches Anwendungsbeispiel

Im ursprünglichen Flexbox-Spezifikationsentwurf konnte box-flex-group verwendet werden, um Flex-Kinder verschiedenen Gruppen zuzuweisen, um flexiblen Raum zwischen ihnen zu verteilen:

css

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 den folgenden Versionen der Spezifikation hat diese Funktionalität kein Äquivalent. Stattdessen wird die Verteilung des Raums im Flex-Container nun mit flex-basis, flex-grow und flex-shrink gehandhabt.