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

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.

Beispiele

<!DOCTYPE html>
<html>
  <head>
    <title>-moz-box-flex example</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.

Browser Kompatibilit├Ąt

BCD tables only load in the browser

Siehe auch

-moz-box-orient (en-US), -moz-box-pack, -moz-box-direction (en-US), flex (en-US)