Detaillierte Erläuterung der elastischen CSS3-Erweiterungsbox

verwenden

• Flexible Boxen spielen beim Front-End-Layout von Webseiten eine entscheidende Rolle, und das Gleiche gilt für mobile Endgeräte. Die Beherrschung des Umgangs mit flexiblen Boxen ist heutzutage für das Schreiben adaptiver Seiten sehr wichtig. Die Beherrschung dieser Layoutregel ist eine wesentliche Fähigkeit.
  

Beschreibung des Elastic-Box-Modells

• Die Hauptachse ist die Achse, die entlang der Richtung verläuft, in der die Flex-Elemente platziert werden (z. B. horizontale Zeilen, vertikale Spalten auf einer Seite). Anfang und Ende dieser Achse werden als Hauptanfang und Hauptende** bezeichnet.
• Die Querachse ist die Achse, die senkrecht zur Richtung verläuft, in der die Flex-Elemente platziert werden. Anfang und Ende der Achse werden als Kreuzanfang und Kreuzende** bezeichnet.
• Das übergeordnete Element (in diesem Fall <section> ), bei dem display: flex festgelegt ist, wird als Flex-Container bezeichnet.
• Elemente, die sich wie flexible Boxen in einem Flex-Container verhalten, werden Flex-Elemente genannt.
  

Häufig verwendete Eigenschaften

Flex-Richtung (gibt die Anordnung der Unterelemente in einem flexiblen Container an)

   Zeilenstandardwert. Die Elemente werden horizontal als Zeile angezeigt.
   Reihe umkehren In umgekehrter Reihenfolge.
   Das Spaltenelement wird vertikal als Spalte angezeigt.
   column-reverse: Dasselbe wie column, aber in umgekehrter Reihenfolge.

Flex-Wrap (Die Eigenschaft gibt an, ob der Flex-Container eine einzelne oder mehrere Zeilen umfasst, und die Richtung der Querachse bestimmt die Richtung, in der neue Zeilen gestapelt werden.)

  Nowrap-Standardwert. Gibt an, dass Elemente nicht in Zeilen oder Spalten aufgeteilt werden sollen.
  Wrap gibt an, dass Elemente bei Bedarf in Zeilen oder Spalten aufgeteilt werden sollen.
  wrap-reverse gibt an, dass Elemente bei Bedarf in Zeilen oder Spalten umbrochen werden, jedoch in umgekehrter Reihenfolge.

Die Eigenschaft „align-items“ definiert die Ausrichtung von Flex-Elementen in vertikaler Achsenrichtung der aktuellen Zeile des Flex-Containers, d. h. sie gibt die Stile der oberen und unteren Zeile an.

   strecken. Der Standardwert. Die Artikel werden gestreckt, damit sie in den Behälter passen.
   Mitte: Der Artikel befindet sich in der Mitte des Containers.
   Flex-Start-Elemente werden am Anfang des Containers positioniert.
   Flex-End-Elemente werden am Ende des Containers positioniert.
   Grundlinie: Das Element befindet sich an der Grundlinie des Containers.

„justify-content“ wird verwendet, um die Ausrichtung flexibler Box-Elemente in der Hauptachsenrichtung (Querachse) festzulegen oder abzurufen.

  Flex-Start-Elemente werden am Anfang des Containers positioniert.
  Flex-End-Elemente werden am Ende des Containers positioniert.
  Mitte: Der Artikel befindet sich in der Mitte des Containers.
  space-between-Elemente werden in einem Container mit Zwischenraum zwischen den Zeilen platziert.
  space-around-Elemente werden in einem Container mit Leerzeichen vor, zwischen und nach jeder Zeile platziert.

Flexible Eigenschaften untergeordneter Elemente

1.Order-Attribut

.flex-container .flex-item { Reihenfolge: <Ganzzahl>; }

<integer>: Verwenden Sie ganzzahlige Werte um die Sortierreihenfolge festzulegen, wobei kleinere Werte vorne stehen. Kann ein negativer Wert sein, Standard ist 0.

2.align-self legt die Ausrichtung des elastischen Boxelements selbst in der Querachsenrichtung (vertikale Achse) fest oder ruft sie ab. (Ähnlich wie align-items)

Oben finden Sie eine ausführliche Erläuterung der elastischen CSS3-Erweiterungsbox. Weitere Informationen zur elastischen CSS3-Erweiterungsbox finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!