Detaillierte Analyse des Flex-Layouts in CSS3

Das Flexbox-Layoutmodul soll eine effizientere Möglichkeit zur Verteilung des Platzes innerhalb eines Containers bieten. Auch wenn die Größe des Containers unbekannt ist oder sich dynamisch ändert.

Die Hauptidee hinter Flex Layout besteht darin, einem Container zu ermöglichen, die Breite/Höhe (und Reihenfolge) seiner Elemente zu ändern, um den verfügbaren Platz optimal auszufüllen (hauptsächlich, um verschiedenen Anzeigegeräten und Bildschirmgrößen gerecht zu werden). Flex-Container erweitern Elemente, um den verfügbaren freien Platz auszufüllen, oder verkleinern sie, um ein Überlaufen zu verhindern.

Am wichtigsten ist, dass Flexbox-Layouts im Vergleich zu regulären Layouts (blockbasierte Layouts in vertikaler Richtung und inline-basierte Layouts in horizontaler Richtung) richtungsunabhängig sind. Diese eignen sich zwar gut für Seiten, sind jedoch nicht flexibel genug, um große oder komplexe Anwendungen zu unterstützen (insbesondere bei Ausrichtungsänderungen, Größenanpassungen, Streckungen, Verkleinerungen usw.).

Prinzip

Da es sich bei Flexbox um ein ganzes Modul und nicht um eine einzelne Eigenschaft handelt, umfasst es viele Dinge, einschließlich seines gesamten Eigenschaftensatzes. Einige davon werden auf dem Container (dem übergeordneten Element, dem sogenannten „Flex-Container“) festgelegt, während andere auf den untergeordneten Elementen (den sogenannten „Flex-Elementen“) festgelegt werden. Während das „normale“ Layout auf der Blockflussrichtung und der Inline-Flussrichtung basiert, basiert das Flex-Layout auf der „Flex-Flussrichtung“. Schauen Sie sich dieses Diagramm aus der Spezifikation an, das die Grundidee hinter dem Flex-Layout erklärt.

Die Elemente werden entlang der Hauptachse (vom Hauptanfang bis zum Hauptende) oder der Querachse (vom Queranfang bis zum Querende) angeordnet.

Hauptachse: Die Hauptachse des Flex-Containers ist die Hauptachse des Flex-Element-Layouts. Beachten Sie, dass es nicht unbedingt horizontal sein muss; es hängt von der Flex-Direction-Eigenschaft ab.

main-start, main-end: Von main-start bis main-end werden Flex-Elemente in den Container gelegt

Hauptgröße: Die Breite oder Höhe eines Flex-Elements basiert auf der Hauptgröße. Die Hauptdimensionseigenschaft eines Flex-Elements ist entweder „Breite“ oder „Höhe“, je nachdem, welcher Wert größer ist.

Querachse: Die Achse, die senkrecht zur Hauptachse steht, wird als Querachse bezeichnet. Seine Richtung hängt von der Richtung der Hauptachse ab

Kreuzanfang | Kreuzende: Die elastische Leine wird mit Artikeln befüllt und vom Kreuzanfang bis zum Kreuzende in den Behälter gelegt.

Quergröße: Die Breite oder Höhe des Flex-Elements. Die verwendete Quergröße ist die Quergröße des Elements. Das Kreuzgrößenattribut ist entweder die „Breite“ oder die „Höhe“ der Kreuzgröße.

Übergeordnete Eigenschaft (Flex-Container)

1. Flexrichtung

Flex-Direction bestimmt die Hauptachsenrichtung, also die Richtung, in der Flex-Elemente angeordnet werden. Neben der standardmäßigen Zeilenrichtung können Flex-Elemente auch vertikal oder umgekehrt (Zeilenumkehr/Spaltenumkehr) angeordnet werden.

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

CSS:

.flex-container {
  Anzeige: Flex;
  Flex-Richtung: Reihe;
}

Wirkung:

2. Flex-Wrap

Wenn wir das Flex-Element nicht komprimieren möchten, wenn das Fenster schmaler wird, sondern das Flex-Element, das die Grenze überschreitet, umbrechen möchten, können wir den Flex-Wrap des Flex-Containers festlegen

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

CSS:

.flex-container {
  Anzeige: Flex;
  Flex-Wrap: Umwickeln;
}

Effekt: Wenn die Seite kleiner wird, wird sie umgebrochen

3. Flex-Flow

flex-direction und flex-wrap können zu einer Eigenschaft flex-flow kombiniert werden, zum Beispiel: flex-flow: row-reverse wrap

4. Inhalte begründen

Dadurch wird die Ausrichtung entlang der Hauptachse festgelegt. Es hilft dabei, den zusätzlichen verbleibenden freien Speicherplatz zu verteilen, wenn alle Flex-Elemente in einer Reihe unflexibel sind oder zwar flexibel sind, aber ihre maximale Größe erreicht haben. Es verfügt auch über eine gewisse Kontrolle über die Anordnung der Elemente, wenn diese die Zeile überschreiten.

.container {
  Inhalt ausrichten: 
Flex-Start | Flex-Ende | Mitte | Abstand dazwischen | Abstand herum | gleichmäßiger Abstand | Start | Ende | links | rechts
} 

CSS:

.flex-container {
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
}

Wirkung:

5. Elemente ausrichten

Nachdem die Zentrierung in Flexrichtung erreicht ist, kann mithilfe von Align-Items eine Zentrierung senkrecht zur Hauptachse erreicht werden.

.container {
  Elemente ausrichten: strecken | Flex-Start | Flex-Ende | zentrieren | Grundlinie | erste Grundlinie | letzte Grundlinie | Start | Ende
} 

CSS:

.flex-container {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}

Wirkung:

6. Inhalt ausrichten

Bei mehreren Zeilen werden die Zeilen eines Flex-Containers intern ausgerichtet, ähnlich wie die Inhaltsausrichtung für einzelne Elemente in der Hauptachse angepasst wird. Wenn Flex nur eine Zeile hat, funktioniert es nicht.

.container {
  Inhalt ausrichten: Flex-Start | Flex-Ende | Mitte | Abstand zwischen | Abstand herum | gleichmäßiger Abstand | strecken | Start | Ende | Grundlinie | erste Grundlinie | letzte Grundlinie
} 

Unterklassenattribute (Flex-Element)

1. Bestellung

Standardmäßig werden Flex-Elemente in der Quellreihenfolge angeordnet. Die Reihenfolgeeigenschaft steuert jedoch die Reihenfolge, in der sie im Flex-Container erscheinen.

CSS:

.eins {
  Bestellung: 3
}

.zwei {
  Bestellung: 1
}

.drei {
  Bestellung: 2
}

Wirkung:

2. Flexibel wachsen

In allen obigen Beispielen belegen die drei Flex-Elemente nur einen kleinen Teil des Flex-Containers. Wenn wir möchten, dass das Flex-Element den Flex-Container füllt, müssen wir das Attribut „Flex-Grow“ für das Flex-Element festlegen. Wie der Name schon sagt, bedeutet „grow“ Wachstum und wird verwendet, um die Erweiterung der Größe von Flex-Elementen zu steuern.

CSS:

.eins {
 Flex-Wachstum: 2;
}

.zwei {
  Flexibel wachsen: 8;
}

.drei {
  Flex-Wachstum: 2;
}

Wirkung:

Wichtige Punkte

• Wenn Flex-Grow eine negative Zahl ist, ist es ungültig.
• Der jedem Element zugewiesene zusätzliche Platz wird nicht gemäß dem Flex-Grow-Verhältnis aufgeteilt, sondern gemäß dem Verhältnis der Breite jedes Elements * seinem eigenen Flex-Grow-Ergebnis! Selbst getestet! ! !

3. Flex-Schrumpf

Das Gegenteil von Flex-Grow ist Flex-Shrink, das verwendet wird, um die Komprimierung von Unterelementen zu steuern, nachdem die Größe der Unterelemente den Flex-Container überschreitet. Wichtige Punkte:

flex-shrink ist ungültig, wenn es eine negative Zahl 4 ist. flex-basis

Dies definiert die Standardgröße eines Elements, bevor der verbleibende Platz zugewiesen wird.

.flex-Element {
  flex-basis: <Länge> | auto; /* Standard auto */
}

Das Schlüsselwort „auto“ bedeutet „schau dir das eigene Breiten- oder Höhenattribut an“.

5. beugen

Dies ist die Abkürzung für die Kombination aus Flex-Grow, Flex-Shrink und Flex-Basis. Der zweite und dritte Parameter (stretch und stretchbase) sind optional. Es wird empfohlen, diese Kurzeigenschaft zu verwenden, anstatt die einzelnen Eigenschaften festzulegen.

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

6. selbst ausrichten

Dies ermöglicht das Überschreiben der Standardausrichtung (oder der durch „align-items“ angegebenen Ausrichtung) einzelner Flex-Elemente.

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

CSS:

.flex-container {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
}

.eins {
  selbst ausrichten: Ende flexen;
}

Wirkung:

Dies ist das Ende dieses Artikels über eine eingehende Analyse des Flex-Layouts in CSS3. 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, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!