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. Es stimmt weder mit den alten CSS-Flexbox-Layout-Entwurfentwürfen für box-flex überein (die auf dieser Eigenschaft basierten) noch mit dem Verhalten von -webkit-box-flex (das auf jenen Entwürfen basiert). Siehe flexbox für Informationen über den aktuellen Standard.
Die -moz-box-flex und -webkit-box-flex CSS Eigenschaften legen fest, wie ein -moz-box oder -webkit-box wächst, um die Box auszufüllen, die ihn im Layout des umgebenden Containers enthält.
Syntax
/* <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 ein <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 auszufüllen.
Hinweise
Die umgebende Box verteilt den verfügbaren zusätzlichen Raum im Verhältnis zum Flex-Wert jedes Inhalts-Elements.
Inhalts-Elemente, die Flex-Wert null haben, wachsen nicht.
Wenn nur ein Inhalts-Element einen nicht-null Flex-Wert hat, wächst es, um den verfügbaren Raum auszufüllen.
Inhalts-Elemente mit dem gleichen Flex-Wert wachsen um den gleichen absoluten Betrag.
Wenn der Flex-Wert über das flex Attribut des Elements festgelegt wird, wird der Stil ignoriert.
Um XUL-Elemente in einer umgebenden Box gleich groß zu machen, setzen Sie das equalsize Attribut der umgebenden Box auf den Wert always. Dieses Attribut hat keine entsprechende CSS-Eigenschaft.
Ein Trick, um alle Inhalts-Elemente in einer umgebenden Box gleich groß zu machen, besteht darin, ihnen alle eine feste Größe zu geben (z.B. height: 0), und den gleichen box-flex Wert größer als null (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 |
Formale Syntax
box-flex =
<number>
Beispiele
Festlegen von box-flex
<div class="example">
<p>I will expand to fill extra space</p>
<p>I will not expand</p>
</div>
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;
}
Spezifikationen
Nicht Teil eines Standards.
Browser-Kompatibilität
Loading…