-moz-box-flex

Achtung: Dies ist eine Eigenschaft zur Steuerung von Teilen des XUL Boxmodells. Sie stimmt weder mit den alten CSS Flexible Box Layout Module Entwürfen für box-flex (welche auf dieser Eigenschaft beruhen), noch dem Verhalten von -webkit-box-flex (welche auf diesen Entwürfen beruht) überein.

Siehe Flexbox für mehr Informationen, was anstelle dieser Eigenschaft verwendet werden sollte.

Übersicht

Die -moz-box-flex und -webkit-box-flex CSS Eigenschaften geben an, wie eine -moz-box oder -webkit-box wächst, um die Box zu füllen, die sie beinhaltet, in Richtung des Layouts der beinhaltenden Box. Siehe Flexbox für mehr Informationen über die Eigenschaften von Flexbox-Elementen.

Initialwert	`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
Medien	visuell
Berechneter Wert	wie angegeben
Animierbar	Nein
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* <number> Werte */
-moz-box-flex: 0;
-moz-box-flex: 3;
-webkit-box-flex: 0;
-webkit-box-flex: 3;

/* Globale Werte */
-moz-box-flex: inherit;
-moz-box-flex: initial;
-moz-box-flex: unset;

Werte

0: Die Box wächst nicht.
> 0: Die Box wächst soweit, dass sie den verfügbaren Raum ausfüllt.

Formale Syntax

<number>

Beispiele

<!DOCTYPE html>
<html>
  <head>
    <title>-moz-box-flex Beispiel</title>
    <style>
      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;
      }
    </style>
  </head>
  <body>
    <div class="example">
      <p>Ich wachse, um den zusätzlichen Raum auszufüllen.</p>
      <p>Ich wachse nicht.</p>
    </div>
  </body>
</html>

Hinweise

Die beinhaltende Box teilt den zur Verfügung stehenden zusätzlichen Abstand proportional zum Flexwert jedes Inhaltselements auf.

Inhaltselemente, die null als Flexwert haben, vergrößern sich nicht.

Falls nur ein Inhaltselement einen Flexwert hat, der nicht null ist, vergrößert es sich, um den verfügbaren Raum auszufüllen.

Inhaltselemente, die den gleichen Flexwert haben, vergrößern sich um den gleichen absoluten Betrag.

Falls der Flexwert über das flex Elementattribut gesetzt wird, wird der Stil ignoriert.

Um XUL Elemente innerhalb einer Box gleich groß zu machen, muss das equalsize Attribut der beinhaltenden Box auf den Wert always gesetzt werden. Dieses Attribut hat keine entsprechende CSS Eigenschaft.

Ein Trick, um alle Inhaltselemente in einer beinhaltenden Box gleich groß zu machen, ist, allen 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).

Spezifikationen

Diese Eigenschaft ist eine nicht standardisierte Erweiterung. Es gab einen alten Entwurf der CSS3 Flexbox Spezifikation, der eine box-flex Eigenschaft definiert hat, aber dieser Entwurf ist mittlerweile überholt.

Merkmal	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Grundlegende Unterstützung	Nicht unterstützt	(Ja)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt

Merkmal	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Grundlegende Unterstützung	Nicht unterstützt	Nicht unterstützt	?	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt

Siehe auch

-moz-box-orient, -moz-box-pack, -moz-box-direction, flex