Was bedeutet flex: 1?

127

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.

Md. Rafee
quelle
1
unter Berufung auf w3schools.com "Die Flex-Eigenschaft ist eine Abkürzung für die Eigenschaften" Flex-Grow "," Flex-Shrink "und" Flex- Base "
Imran Ali,

Antworten:

84

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

Danut Pralea
quelle
10
Flex: 1; ist nicht gleich flex: 1 1 0; siehe meine Antwort unten, um zu sehen warum.
DreamTeK
Nebenbei bemerkt: Ich denke, wenn Sie flexfür alle Kinder das Gleiche anwenden , ist es eigentlich wichtig flex: 1 ? 0;, wo "?" kann alles sein, es wird keinen Unterschied machen
flen
@DreamTeK Nur in nicht standardkonformen Browsern wie Chrome.
TylerH
1
@ TylerH Richtig und in meiner Antwort vermerkt what does flex:1 mean?ist jedoch offen für Interpretationen. Die Operation fragt nicht nach der Spezifikation, sondern nur nach dem, was gerade passiert. Leider ist Chrome jetzt der beliebteste Browser und es ist Unterstützung erforderlich. Ich bin selbst kein Fan oder Nutzer von Chrome!
DreamTeK
1
@TylerH Aus diesem Grund wird in meiner Antwort darauf verwiesen: "Es sollte beachtet werden, dass dies fehlschlägt, weil diese Browser die Spezifikation nicht eingehalten haben." zusammen mit einem Link zur Spezifikation!
DreamTeK
97

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%.
Rinku Bhilota
quelle
1
@ CookieMonster Nein, flex: 1bedeutet 1 1 0... aber auf IE ist es1 1 0px
Ason
@LGSon, Sie können die Einheit so aus dem Basiswert weglassen 1 1 0und 1 1 0pxsind äquivalent. IE unterstützt nur den mit einer Einheit.
CookieMonster
@CookieMonster Ich weiß, wie Flexbox funktioniert. Ich habe gerade Ihren ersten Kommentar korrigiert, was falsch ist.
Ason
@LGSon, Wie ist flex: 1 bedeutet 1 1 0px falsch, wenn 1 1 0pxund 1 1 0sind gleichwertig?
CookieMonster
2
@CookieMonster Sie rendern möglicherweise dasselbe, sind jedoch nicht gleichwertig, da bei Verwendung eines einheitlosen Werts für flex-basisder Inhalt ignoriert wird und die Elementgröße auf dem flex-grow/ basiert flex-shrink.
Ason
77

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.

DreamTeK
quelle
1
Wenn der Wert 0 ist, ist die Einheit nicht obligatorisch. Die Spezifikation sagt, flex: 1ist das gleiche wie das flex: 1 1 0. In Ihrem Beispiel funktioniert das Entfernen der .WrapKlasse in der .Flex110x,.Flex1, .Flex110, .WrapRegel wie erwartet.
Geben Sie bitte einen Link an. Ich kann in der Spezifikation nicht finden, was Sie sagen. Ich habe nichts erfunden, meine Antwort basiert auf der Flexbox-Spezifikation
@Obsidian Hier ist der Link: w3.org/TR/css-flexbox-1 Wenn Sie zu dem Abschnitt für 'Kurzschrift' gehen, finden Sie: "flex: [positive Zahl] Entspricht flex: [positive Zahl] 1 0 ...
MikeB
1
@Toskan Für maximale Kompatibilität verwenden Sie die vollständige Syntaxflex:1 1 0n;
DreamTeK
2
Vielen Dank, dass Sie auf diesen Unterschied hingewiesen haben. Ich konnte nicht herausfinden, woher meine Probleme stammten. Habe etwas Kopfgeld.
Nit