Wie wir alle wissen, das flex
ist Eigentum eine Abkürzung für das flex-grow
, flex-shrink
und die flex-basis
Eigenschaften. 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: 1
wird verwendet. Ist es eine Abkürzung für 1 1 auto
oder 1 0 auto
? Ich kann nicht verstehen, was es bedeutet und ich bekomme nichts, wenn ich google.
Antworten:
Hier ist die Erklärung:
https://www.w3.org/TR/css-flexbox-1/#flex-common
Daher
flex:1
ist äquivalent zuflex: 1 1 0
quelle
flex
für alle Kinder das Gleiche anwenden , ist es eigentlich wichtigflex: 1 ? 0;
, wo "?" kann alles sein, es wird keinen Unterschied machenwhat 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!flex: 1
bedeutet folgendes:quelle
flex: 1
bedeutet1 1 0
... aber auf IE ist es1 1 0px
1 1 0
und1 1 0px
sind äquivalent. IE unterstützt nur den mit einer Einheit.1 1 0px
und1 1 0
sind gleichwertig?flex-basis
der Inhalt ignoriert wird und die Elementgröße auf demflex-grow
/ basiertflex-shrink
.ACHTUNG
In einigen Browsern:
flex:1;
ist nicht gleichflex:1 1 0;
flex:1;
=flex:1 1 0n;
(wobei n eine Längeneinheit ist).Der entscheidende Punkt hierbei ist, dass die Flex-Basis eine Längeneinheit erfordert .
In Chrome zum Beispiel
flex:1
undflex:1 1 0
erzeugen unterschiedliche Ergebnisse. In den meisten Fällen scheintflex: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
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:
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.
quelle
flex: 1
ist das gleiche wie dasflex: 1 1 0
. In Ihrem Beispiel funktioniert das Entfernen der.Wrap
Klasse in der.Flex110x,.Flex1, .Flex110, .Wrap
Regel wie erwartet.flex:1 1 0n;