Einführung in die Verwendung und Eigenschaften von Flex

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>

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>

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.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+

  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!