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 ursprünglichen CSS-Flexiblen Box-Layout-Entwurfs. Sie wurde in der Spezifikation ersetzt. Siehe flexbox für Informationen über den aktuellen Standard.

Die box-flex-group CSS Eigenschaft ordnet die Kind-Elemente des Flexbox einem 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 erhöht wurde, wird der Vorgang für die Kinder innerhalb der nächsten Flex-Gruppe wiederholt, wobei jeglicher Platz verwendet wird, der aus der vorherigen Flex-Gruppe übrig geblieben ist. Sobald es keine weiteren Flex-Gruppen mehr gibt und noch immer Platz übrig ist, wird der zusätzliche Platz innerhalb der enthaltenen Box gemäß der box-pack Eigenschaft aufgeteilt.

Wenn die Box überlaufen würde, nachdem der bevorzugte Platz der Kinder berechnet wurde, wird Platz von flexiblen Elementen in ähnlicher Weise entfernt, wie beim Hinzufügen von zusätzlichem Platz. Jede Flex-Gruppe wird der Reihe nach untersucht und Platz wird entsprechend dem Verhältnis der Flexibilität jedes Elements entfernt. Elemente schrumpfen nicht unter ihre Mindestbreiten.

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 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

Einfaches Nutzungsbeispiel

Im ursprünglichen Flexbox-Standard konnte box-flex-group verwendet werden, um Flex-Kindern unterschiedliche Gruppen zuzuweisen, um flexiblen Platz dazwischen 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 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.