Dieser Artikel stellt die Verwendung und Eigenschaften von Flex vor
Dies ist eine adaptive 3-Spalten-Box
<div class="flex">
<div style="background-color:red;">红色</div>
<div style="background-color:blue;">蓝色</div>
<div style="background-color:green;">绿色</div></div><style>.flex{ display: flex;}.flex div{border: 1px solid #000; flex:auto; height: 100px;}</style>
Flex: Flex-Grow-Flex-Shrink-Flex-Basis |auto|initial|inherit;
flex hat hauptsächlich 3 Attributwerte
, die flex-grow sind und den Betrag angeben, um den das Projekt im Vergleich zu anderen erweitert wird flexible Projekte.
<div class="flex1">
<div style="background-color:red;">红色</div>
<div style="background-color:blue;">蓝色</div>
<div style="background-color:green;">绿色</div></div><style>.flex1{ display: flex; width:400px;}.flex1 div{border: 1px solid #000; flex:auto; height: 200px;}.flex1 div:nth-child(1){-webkit-flex:1 0 100px;flex:1 0 100px;}.flex1 div:nth-child(2){-webkit-flex:2 0 100px;flex:2 0 100px;}.flex1 div:nth-child(3){-webkit-flex:3 0 100px;flex:3 0 100px;}</style>Wie im obigen Beispiel wird ausgelöst, weil größer als die Summe der Breiten der
untergeordneten Elemente ist >flex-basis ist auf 100px eingestellt. Die Breite von
flex beträgt400px und die Gesamtlänge der drei Doms darin ist auf 300px eingestellt bedeutet, dass eine Restbreite von 100 verbleibt.
Der Erweiterungsbetrag des ersten untergeordneten Elements: (1/(1+2+3))*100, was ungefähr 16 Pixel entspricht
Der Erweiterungsbetrag des zweiten Unterelements: (2/(1+2+3))*100, was ungefähr 32px entspricht;
Die Erweiterung des dritten Unterelements: (3/(1+2+3))*100, was ungefähr 48px entspricht;
sind bzw.
flex-shrink gibt den Betrag an, um den der Artikel im Vergleich zu anderen flexiblen Artikeln schrumpft.
RotWie im obigen Beispiel wird ausgelöst, weil
flex-basis, wenn die Breite des übergeordneten Containerskleiner ist als die Summe der Breiten der untergeordneten Elemente ist auf 200 Pixel eingestellt
Die Breite von Flex beträgt 400 Pixel und die Gesamtlänge der drei Doms im Inneren ist auf 600 Pixel eingestellt, dann ist die verbleibende Breite 200 Pixel geringer .
Da das Ausmaß der Schrumpfung festgelegt ist, 200*1+200*2+200*3=1200;
Die Breite des ersten Untercontainers beträgt also 200-(200*1/1200)*200=166px
Die Breite des zweiten Untercontainers beträgt also 200-(200*2/1200)*200=134px
Die Breite des dritten Untercontainers beträgt also 200-(200*3/1200)*200=100px
Wenn „flex-basis“ im „flex“ nicht 0 ist Attribut (einschließlich des Werts ist automatisch, zu diesem Zeitpunkt entspricht der Skalierungsreferenzwert der Breite seines eigenen Inhalts), das „Flex-Kind“ weist den verbleibenden Speicherplatz des Containers zu (der verbleibende Speicherplatz entspricht der Breite des). Container abzüglich des Skalierungsreferenzwerts jedes Elements)
Wenn „flex Wenn -basis“ im „flex“-Attribut gleich 0 ist, weist „flex items“ den gesamten Speicherplatz des Containers zu (da die Summe Der Flex-Basiswert jedes Elements ist gleich 0, der verbleibende Platz entspricht der Breite des Containers abzüglich des Flex-Basiswerts jedes Elements. Das heißt, minus 0, der endgültige verbleibende Platzwert ist gleich die Breite des Containers), sodass Sie mit dieser Funktion „flex: n“ für jedes Unterelement definieren können, um die Gesamtbreite des Containers proportional zu teilen
= Unterstützt
= Nicht unterstützt
= teilweise unterstützt
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android-Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Grundlegende Unterstützung | 6.0-10.02.0-21.0 | 4.0-20.0 | 6.015.0+-webkit- | 6.0 -6.1 | 2.1-4.3 | 18.0-19.0 | ||
| 11.0+ | 22.0+ | 21.0+- webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit- | |
| 29.0+ | 9.0+ | 9.0+ | 28.0+ | tr>
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0-10.0 | 2.0-21.0 | 4.0-20.0 | 6.0 | 15.0+-webkit- | 6.0-6.1 | 2.1-4.3 | 18.0-19.0 |
| 11.0+ | 22.0+ | 21.0+-webkit- | 6.1+-webkit- | 17.0+ | 7.0+-webkit- | 4.4+ | 20.0+-webkit- | |
| 29.0+ | 9.0+ | 9.0+ | 28.0+ |
Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung und Eigenschaften von Flex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
