box-flex

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 zur Steuerung von Teilen des XUL-Box-Modells. Sie entspricht weder den alten CSS-Flexible-Box-Layout-Modulentwürfen für box-flex (die auf dieser Eigenschaft basierten) noch dem Verhalten von -webkit-box-flex (das auf diesen Entwürfen basiert). Siehe flexbox für Informationen über den aktuellen Standard.

Die -moz-box-flex und -webkit-box-flex CSS Eigenschaften spezifizieren, wie eine -moz-box oder -webkit-box wächst, um die Box, die sie enthält, in der Richtung des Layouts der enthaltenen Box auszufüllen.

Syntax

css

/* <number> values */
-moz-box-flex: 0;
-moz-box-flex: 2;
-moz-box-flex: 3.5;
-webkit-box-flex: 0;
-webkit-box-flex: 2;
-webkit-box-flex: 3.5;

/* Global values */
-moz-box-flex: inherit;
-moz-box-flex: initial;
-moz-box-flex: revert;
-moz-box-flex: revert-layer;
-moz-box-flex: unset;
-webkit-box-flex: inherit;
-webkit-box-flex: initial;
-webkit-box-flex: revert;
-webkit-box-flex: revert-layer;
-webkit-box-flex: unset;

Die box-flex Eigenschaft wird als <number> angegeben. Wenn der Wert 0 ist, wächst die Box nicht. Wenn er größer als 0 ist, wächst die Box, um einen Anteil des verfügbaren Raums zu füllen.

Anmerkungen

Die umschließende Box verteilt den verfügbaren zusätzlichen Platz im Verhältnis zum Flex-Wert jedes der Inhaltselemente.

Inhaltselemente, die einen Flex-Wert von null haben, wachsen nicht.

Wenn nur ein Inhaltselement einen nicht-Null-Flex-Wert hat, dann wächst es, um den verfügbaren Raum zu füllen.

Inhaltselemente, die denselben Flex-Wert haben, wachsen um dieselbe absolute Menge.

Wenn der Flex-Wert über das flex Attribut des Elements festgelegt wird, wird der Style ignoriert.

Um XUL-Elemente in einer umschließenden Box gleich groß zu machen, setzen Sie das equalsize Attribut der umschließenden Box auf den Wert always. Dieses Attribut hat keine entsprechende CSS-Eigenschaft.

Ein Trick, um alle Inhaltselemente in einer umschließenden Box gleich groß zu machen, besteht darin, ihnen alle eine feste Größe (z.B. height: 0) und denselben box-flex Wert größer als null zu geben (z.B. -moz-box-flex: 1).

Formale Definition

Anfangswert	`0`
Anwendbar auf	Elemente, die direkte Kinder eines Elements mit einem CSS `display` Wert von `-moz-box` oder `-moz-inline-box` oder `-webkit-box` oder `-webkit-inline-box` sind
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formaler Syntax

box-flex = 
  <number>

Beispiele

box-flex festlegen

html

<div class="example">
  <p>I will expand to fill extra space</p>
  <p>I will not expand</p>
</div>

css

div.example {
  display: -moz-box;
  display: -webkit-box;
  border: 1px solid black;
  width: 100%;
}
div.example > p:nth-child(1) {
  -moz-box-flex: 1; /* Mozilla */
  -webkit-box-flex: 1; /* WebKit */
  border: 1px solid black;
}
div.example > p:nth-child(2) {
  -moz-box-flex: 0; /* Mozilla */
  -webkit-box-flex: 0; /* WebKit */
  border: 1px solid black;
}