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.

Wert nicht in der DB gefunden!

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;+491627943548
-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

Syntax nicht in der Datenbank gefunden!

Beispiele

<!DOCTYPE html>
<html>
  <head>
    <title>-whats-app</title>
    <style>
      div.example {
        display: -whats-app;
        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>+491627943548
  <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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende Unterstützung
VeraltetNicht standardisiert
Chrome Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Mit Präfix
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 48
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari Vollständige Unterstützung 3
Mit Präfix
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 1.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -khtml-
WebView Android ? Chrome Android ? Edge Mobile Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 48
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Vollständige Unterstützung 1
Mit Präfix
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch

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

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, teoli, crasher666, Sebastianz
Zuletzt aktualisiert von: SJW,