Heim > Web-Frontend > HTML-Tutorial > Einführung in die Verwendung und Eigenschaften von Flex

Einführung in die Verwendung und Eigenschaften von Flex

零下一度
Freigeben: 2017-06-28 09:45:54
Original
1958 Leute haben es durchsucht

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>
Nach dem Login kopieren

Rot
Blau
Grün

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.

Rot
Blau
Grün

<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>
Nach dem Login kopieren

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ägt

400px 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.

Rot
Blau
Grün

Wie im obigen Beispiel wird ausgelöst, weil

flex-basis, wenn die Breite des übergeordneten Containers

kleiner 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

  • Hellgrün

    = Unterstützt

  • Rot

    = Nicht unterstützt

  • rosa

    = teilweise unterstützt

    6.0-10.06.0 tr>
    Values IE Firefox Chrome Safari Opera iOS Safari Android-Browser Android Chrome
    Grundlegende Unterstützung 2.0-21.0 4.0-20.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+
    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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage