Was bedeutet flex: 1?

Wie wir alle wissen, das flexist Eigentum eine Abkürzung für das flex-grow, flex-shrinkund die flex-basisEigenschaften. Der Standardwert ist 0 1 auto, was bedeutet

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

aber ich habe bemerkt, an vielen Stellen flex: 1wird verwendet. Ist es eine Abkürzung für 1 1 autooder 1 0 auto? Ich kann nicht verstehen, was es bedeutet und ich bekomme nichts, wenn ich google.

Hier ist die Erklärung:

https://www.w3.org/TR/css-flexbox-1/#flex-common

flex: <positive-number>
Entspricht flex: <positive-number> 1 0. Macht das Flex-Element flexibel und setzt die Flex-Basis auf Null, was dazu führt, dass ein Element den angegebenen Anteil des freien Speicherplatzes im Flex-Container erhält. Wenn alle Elemente im Flex-Container dieses Muster verwenden, sind ihre Größen proportional zum angegebenen Flex-Faktor.

Daher flex:1ist äquivalent zuflex: 1 1 0

flex: 1 bedeutet folgendes:

flex-grow : 1;    ➜ The div will grow in same proportion as the window-size       
flex-shrink : 1;  ➜ The div will shrink in same proportion as the window-size 
flex-basis : 0;   ➜ The div does not have a starting value as such and will 
                     take up screen as per the screen size available for
                     e.g:- if 3 divs are in the wrapper then each div will take 33%.

ACHTUNG

In einigen Browsern:

flex:1; ist nicht gleichflex:1 1 0;

flex:1;= flex:1 1 0n;(wobei n eine Längeneinheit ist).

• Flex-Grow: Eine Zahl, die angibt, um wie viel das Element im Vergleich zu den übrigen flexiblen Elementen wächst.
• Flex-Shrink Eine Zahl, die angibt, um wie viel der Artikel im Vergleich zu den übrigen flexiblen Artikeln schrumpft
• Flex-Basis Die Länge des Artikels. Zulässige Werte: "auto", "erben" oder eine Zahl gefolgt von "%", "px", "em" oder einer anderen Längeneinheit.

Der entscheidende Punkt hierbei ist, dass die Flex-Basis eine Längeneinheit erfordert .

In Chrome zum Beispiel flex:1und flex:1 1 0erzeugen unterschiedliche Ergebnisse. In den meisten Fällen scheint flex:1 1 0;es zu funktionieren, aber lassen Sie uns untersuchen, was wirklich passiert:

BEISPIEL

Die Flex-Basis wird ignoriert und nur Flex-Grow und Flex-Shrink werden angewendet.

flex:1 1 0;= flex:1 1;=flex:1;

Dies mag auf den ersten Blick in Ordnung erscheinen, wenn die angewendete Einheit des Containers verschachtelt ist. erwarte das Unerwartete!

Versuchen Sie dieses Beispiel in CHROM

.Wrap{
  padding:10px;
  background: #333;
}
.Flex110x, .Flex1, .Flex110, .Wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.Flex110 {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
}
.Flex1 {
  -webkit-flex: 1;
  flex: 1;
}
.Flex110x{
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
}

FLEX 1 1 0
<div class="Wrap">
  <div class="Flex110">
    <input type="submit" name="test1" value="TEST 1">
  </div>
</div>

FLEX 1
<div class="Wrap">
  <div class="Flex1">
    <input type="submit" name="test2" value="TEST 2">
  </div>
</div>

FLEX 1 1 0%
<div class="Wrap">
  <div class="Flex110x">
    <input type="submit" name="test3" value="TEST 3">
  </div>
</div>

KOMPATIBILITÄT

Es ist zu beachten, dass dies fehlschlägt, da einige Browser die Spezifikation nicht eingehalten haben .

Browser, die die vollständige Flex-Spezifikation verwenden:

• Firefox - ✓
• Edge - ✓ (Ich weiß, ich war auch schockiert.)
• Chrome - x
• Tapfer - x
• Oper - x
• IE - (lol, es funktioniert ohne Längeneinheit, aber nicht mit einer.)

UPDATE 2019

Die neuesten Versionen von Chrome scheinen dieses Problem endgültig behoben zu haben, andere Browser jedoch noch nicht.

Getestet und funktioniert in Chrome Ver 74.