Detaillierte Erklärung des Flex-Layouts in CSS

Flex-Layout wird auch elastisches Layout genannt. Jeder Container kann als Flex-Layout angegeben werden.

Mehrere Möglichkeiten, flexible Boxen zu deklarieren

Wie bereits erwähnt, können alle Container als Flex-Layout angegeben werden

.box{ Anzeige:flex;}

Es können auch Inline-Elemente verwendet werden:

Anzeige: Inline-Flex;

Ändern der Richtung eines Flex-Elements

Die Standardrichtung der elastischen Box verläuft von links nach rechts. Die Achse ist horizontal. Das Standardattribut von flex-direction ist row

.box{ Anzeige:flex;}

Sie können flex-direction ändern

Attribute zum Ändern der Anordnungsrichtung, d. h. zum Ändern der Achse in die vertikale Richtung

.box{ Anzeige:flex; Flex-Ableitung:Spalte;}

Sie können es auch umkehren, indem Sie die Eigenschaft in column-reverse , row-reverse ändern.

Gleicher Grund

Steuern des Überlaufs elastischer Boxen

Wenn sich in der Box zu viele Elemente befinden und die horizontale Breite oder Höhe nicht ausreicht, besteht die Standardsituation darin, die Breite der Elemente in der Box zu reduzieren.

Wir können dies lösen, indem wir die Zeile hier umbrechen

Durch das Hinzufügen von flex-wrap zur Box kann der übergelaufene Teil nach unten gewickelt werden

Ebenso kann durch Hinzufügen von „reverse“ nach dem Wrap-Attribut der Effekt eines Umbruchs ab der untersten Zeile erzielt werden.

Das Gleiche gilt für die horizontale und vertikale Achse.

Wir können auch flex-flow verwenden, um die Richtung der Achse festzulegen und ob gleichzeitig ein Wrap durchgeführt werden soll.

Hauptachse und Querachse

Schauen wir uns ohne weitere Umschweife die Bilder an:

Wenn die Breite nicht ausreicht und das Element überläuft und einen Zeilenumbruch verursacht, wird eine Querachse angezeigt:

Wenn die Eigenschaft flex-idrection:column lautet, ist die Hauptachse vertikal und die Querachse senkrecht zur Hauptachse.

Anordnung der Hauptachse

Die Eigenschaft, die die Hauptachse steuert, ist justify-content

Im Folgenden wird die horizontale Richtung als Beispiel verwendet

1. Der ganze Körper liegt auf einer Seite

Die Standardmethode besteht darin, von links nach rechts auf der Hauptachse am Anfang auszurichten, d. justify-content:flex-start

Wenn es am Ende ausgerichtet ist, ist es justify-content:flex-end

Wenn die Hauptachse umgekehrt wird, also von rechts nach links, dann ist der Anfang rechts und das Ende links

2. Zentrieren Sie das Ganze: justify-content:center

3. Linke und rechte Seite, Mitte in der Mitte: justify-content:space-between

4. Die Elemente haben auf beiden Seiten den gleichen Abstand: justify-content:space-around

5. Inhalt ausrichten: Abstand gleichmäßig

Querachsenanordnung

Die Eigenschaft, die das Querzeichnen steuert, ist align-centent

1. Der ganze Körper liegt auf einer Seite

Ähnlich wie bei der Hauptachse ist flex-start der Anfang der Querachse flex-end das Ende der Querachse.

2. Gesamtzentrierung: align-content:center

3. Die Querachse liegt nahe am Rand und die anderen Elemente sind gleichmäßig verteilt: justify-content:space-between

4. Der Abstand zwischen den achsenübergreifenden Elementen ist derselbe: justify-content:space-around

5. Gleichmäßiger Abstand zwischen achsenübergreifenden Elementen: justify-content:space-evenly

Steuerung einzelner Elemente innerhalb einer Flexbox

1. selbst ausrichten

Mit align-self können Sie einzelne Elemente ähnlich steuern, wie Sie die Hauptachse als Ganzes steuern.

2. Zuweisung des verfügbaren Speicherplatzes für Elemente: Flex-Grow

Das flex-grow Attribut bezieht sich auf den Anteil der untergeordneten Elemente, die der übergeordneten Box zugewiesen werden.

Wenn beide 1 sind:

Es können auch andere Proportionen sein. Wenn es 0 ist, ist es die Originalgröße.

Elemente dynamisch verkleinern

Die dynamische Schrumpfung eines Elements wird durch flex-shrink -Eigenschaft gesteuert. Wenn die Gesamtbreite Ihrer internen Elemente größer ist als die Breite Ihrer externen Elemente und wrap nicht zum Umschließen verwendet wird, können Sie Flex-Shrink verwenden, um die Skalierung der internen Elemente zu steuern.

0 bedeutet kein Zoomen. Je größer der Wert, desto stärker das Zoomen.

Flex-Basis der Hauptachse

Legen Sie die Basisgröße des Elements innerhalb der Box flex-basis fest. Diese hat eine höhere Priorität als die von CSS festgelegte Breite und Höhe.

So schreiben Sie elastische Elementattributkombinationen

Flex-Wachstum: 1;
Flex-Schrumpfen: 2;
Flex-Basis: 100px;

Äquivalent zu

flex:1 2 100px;

Zusammenfassen

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung des Flex-Layouts in CSS. Weitere relevante Inhalte zum CSS-Flex-Layout finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!