Detaillierte Erläuterung des Beispielcodes für das elastische CSS3 Flex-Layout

1. Grundlegende Konzepte

 //Jeder Container kann als Flex-Layout angegeben werden.
 .Kasten{
   Anzeige: Flex;
 }
 //Inline-Elemente können auch Flex-Layout verwenden.
 .Kasten{
   Anzeige: Inline-Flex;
 }
 //Beachten Sie, dass nach der Einstellung auf Flex-Layout die Attribute „Float“, „Clear“ und „Vertical-Align“ der untergeordneten Elemente ungültig werden.

2. Containereigenschaften

1. Flexrichtung

flex-direction bestimmt die Richtung der Artikelanordnung

 .Kasten {
   Flex-Richtung: Zeile | Zeile umkehren | Spalte | Spalte umkehren;
 }

2. Flex-Wrap

Standardmäßig werden Elemente auf einer Linie (auch „Achse“ genannt) angeordnet. Die Eigenschaft „Flex-Wrap“ definiert, wie der Umbruch erfolgt, wenn eine Achse nicht passt.

 .Kasten{
   Flex-Wrap: Jetzt-Wrap | Wrap | Wrap-Reverse;
 }

3. Flex-Flow

Die Eigenschaft „Flex-Flow“ ist eine Kurzform der Eigenschaften „Flex-Direction“ und „Flex-Wrap“. Der Standardwert lautet „Row Nowrap“.

 .Kasten {
   Flex-Flow: <Flex-Richtung> || <Flex-Wrap>;
 }

4. Inhalt begründen

Die Eigenschaft „Justify-Content“ definiert, wie Elemente horizontal ausgerichtet werden.

 .Kasten {
   Inhalt ausrichten: Flex-Start | Flex-Ende | Mitte | Abstand dazwischen | Abstand drumherum;
 }

5. Element ausrichten

Die Eigenschaft „align-item“ definiert die vertikale Ausrichtung von Elementen.

 .Kasten {
   Elemente ausrichten: Flex-Start | Flex-Ende | Mitte | Grundlinie | Strecken;
 }

3.6 align-content-Eigenschaft

Die Eigenschaft „align-content“ definiert die Ausrichtung mehrerer Achsen. Wenn das Projekt nur eine Rasterlinie hat, ist diese Eigenschaft wirkungslos.

 .Kasten {
   Inhalt ausrichten: Flex-Start | Flex-Ende | Mitte | Abstand dazwischen | Abstand drumherum | strecken;
 }

3. Projektattribute

1. Bestellung

Das Order-Attribut definiert die Reihenfolge, in der die Elemente sortiert werden. Je kleiner der Wert, desto höher die Rangfolge. Der Standardwert ist 0.

 .Artikel {
   Reihenfolge: <Ganzzahl>;
 }

2. Flexibel wachsen

Das Attribut „Flex-Grow“ definiert den Vergrößerungsfaktor des Elements. Der Standardwert ist 0, was bedeutet, dass das Element nicht vergrößert wird, wenn noch Platz vorhanden ist.

 .Artikel {
   flex-grow: <Zahl>; /* Standard 0 */
 }
 // Wenn alle Elemente eine Flex-Grow-Eigenschaft von 1 haben, teilen sie den verbleibenden Platz (sofern vorhanden) gleichmäßig auf. Wenn ein Element eine Flex-Grow-Eigenschaft von 2 und die anderen eine Flex-Grow-Eigenschaft von 1 haben, nimmt das erstere doppelt so viel verbleibenden Speicherplatz ein wie die anderen Elemente.

3. Flex-Schrumpf

Die Eigenschaft „Flex-Shrink“ definiert das Schrumpfverhältnis des Elements. Der Standardwert ist 1, was bedeutet, dass das Element schrumpft, wenn nicht genügend Platz vorhanden ist.

 .Artikel {
   flex-shrink: <Zahl>; /* Standard 1 */
 }

4. Flex-Basis

Die Flex-Basis-Eigenschaft definiert die Hauptgröße, die ein Element einnimmt, bevor zusätzlicher Platz verteilt wird. Der Browser verwendet diese Eigenschaft, um zu berechnen, ob auf der Hauptachse zusätzlicher Platz vorhanden ist. Der Standardwert ist „auto“, was der Originalgröße des Projekts entspricht.

 .Artikel {
   flex-basis: <Länge> | auto; /* Standard auto */
 }
 /*Es kann auf denselben Wert wie das Breiten- oder Höhenattribut eingestellt werden (z. B. 350 Pixel). Dann nimmt das Element einen festen Platz ein. */

4.5 Flex-Eigenschaft

Die Flex-Eigenschaft ist eine Abkürzung für Flex-Grow, Flex-Shrink und Flex-Basis. Der Standardwert ist 0 1 auto. Die letzten beiden Attribute sind optional.

    .Artikel {
      flex: keine | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }

Diese Eigenschaft hat zwei Kurzwerte: auto (1 1 auto) und keine (0 0 auto).

4.6 Die align-self-Eigenschaft

Mit der Eigenschaft „align-self“ können einzelne Elemente anders als andere Elemente ausgerichtet werden, wobei die Eigenschaft „align-items“ überschrieben wird. Der Standardwert ist auto, was bedeutet, dass die Eigenschaft align-items des übergeordneten Elements geerbt wird. Wenn kein übergeordnetes Element vorhanden ist, entspricht dies stretch. Entspricht align-items

 .Artikel {
   selbst ausrichten: automatisch | Flex-Start | Flex-Ende | Mitte | Grundlinie | strecken;
 }

Zusammenfassen

Oben finden Sie eine ausführliche Erläuterung des vom Herausgeber eingeführten Beispielcodes für das elastische CSS3 Flex-Layout. Ich hoffe, dass es für alle hilfreich sein wird. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!