Detaillierte Erläuterung des Flex-Layouts

Dieses Mal werde ich Ihnen eine detaillierte Erklärung des Flex-Layouts geben. Was sind die Vorsichtsmaßnahmen für die detaillierte Erklärung des Flex-Layouts?

Vertikale Zentrierung ist eine gängige Seitenlayout-Methode. Für Inline-Elemente können Sie text-align:center;vertical-align:center festlegen, um dies zu erreichen,
Elemente auf Blockebene können normalerweise durch die folgenden Einstellungen erreicht werden

.parent{    position: relative;
}.child{    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);
}

Für die Einfachheit und Eleganz von CSS gibt es jedoch zusätzlich zu Inline, Inline-Block und Blocklayout die vierte Layoutmethode von CSS, Flex, entstand
Mit nur den folgenden Einstellungen können Sie das Element einfach vertikal zentrieren

.parent{    display: flex;    justify-content: center;    align-items: center;
}

Hinweis: Bei Einstellung auf Flex-Layout werden die Float-, Clear- und Vertical-Align-Attribute von die untergeordneten Elemente sind ungültig

FlexGrundkonzepte

Elemente, die Flex-Layout verwenden, werden Flex-Container genannt. Alle untergeordneten Elemente innerhalb eines Elements werden als Flex-Elemente bezeichnet.
Container haben standardmäßig zwei Achsen: die horizontale Hauptachse und die vertikale Querachse.
Die Startposition der Hauptachse (der Schnittpunkt mit der Grenze) wird als Hauptstart bezeichnet, und die Endposition wird als Hauptende bezeichnet; die Startposition der Querachse wird als Querstart bezeichnet, und die Endposition wird als Kreuz bezeichnet Ende.
Elemente werden standardmäßig entlang der Hauptachse angeordnet. Der von einem einzelnen Element eingenommene Raum auf der Hauptachse wird als Hauptgröße bezeichnet, und der von einem einzelnen Element eingenommene Raum auf der Querachse wird als Quergröße bezeichnet.

Eigenschaften des Flex-Containers

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction

Die Eigenschaft „flex-direction“ bestimmt die Richtung der Hauptachse.

Reihe (Standardwert): Die Hauptachse verläuft in horizontaler Richtung und der Startpunkt befindet sich am linken Ende.

Reihenrückwärts: Die Hauptachse verläuft in horizontaler Richtung und der Startpunkt ist am rechten Ende

Spalte: Die Hauptachse ist in vertikaler Richtung, der Startpunkt ist am oberen Rand

Spaltenumkehr: Die Hauptachse ist vertikal, die Der Startpunkt liegt am unteren Rand

Flex-Wrap

Standardmäßig sind die Elemente auf der Hauptachse angeordnet. Das Flex-Wrap-Attribut definiert, wie eine Linie umbrochen wird, wenn es sich um die Hauptachsenlinie handelt passt nicht.

nowrap (Standardwert):, kein Zeilenumbruch

wrap: Zeilenumbruch, die erste Zeile ist oben

wrap-reverse: Umbruch, die erste Zeile ist unten

Flex-Flow

Das Flex-Flow-Attribut ist die Abkürzung des Flex-Direction-Attributs und des Flex-Wrap-Attributs
Der Standardwert ist row nowrap.

justify-content

justify-content-Attribut definiert die Ausrichtung des Elements (Selbstelement) auf der Hauptachse.

flex-start (Standard): linksbündig

flex-end: rechtsbündig

center: zentriert

space-between: ausgerichtet bei An beiden Enden sind die Abstände zwischen den Elementen alle gleich.

space-around: Jedes Element ist auf beiden Seiten gleichmäßig verteilt. Daher ist der Abstand zwischen den Elementen doppelt so groß wie der Abstand zwischen den Elementen und dem Rand.

align-items

Das align-items-Attribut definiert, wie Elemente auf der Querachse ausgerichtet werden.

Stretch (Standardwert): Wenn das Element keine Höhe festlegt oder auf „Auto“ eingestellt ist, nimmt es die gesamte Höhe des Containers ein.

Flex-Start: Richten Sie den Startpunkt der Querachse aus.

Flex-Ende: Richten Sie den Endpunkt der Querachse aus.

Mitte: Richten Sie den Mittelpunkt der Querachse aus.

Grundlinie: Die Grundlinienausrichtung der ersten Textzeile des Elements.

align-content

Das align-content-Attribut definiert die Ausrichtung mehrerer Achsen. Diese Eigenschaft hat keine Auswirkung, wenn das Projekt nur eine Achse hat.

Stretch (Standardwert): Die Achse nimmt die gesamte Querachse ein.

Flex-Start: Am Startpunkt der Querachse ausrichten.

Flex-Ende: am Endpunkt der Querachse ausgerichtet.

Mitte: Ausgerichtet am Mittelpunkt der Querachse.

Abstand zwischen: An beiden Enden der Querachse ausrichten und die Abstände zwischen den Achsen gleichmäßig verteilen.

space-around: Jede Achse hat auf beiden Seiten den gleichen Abstand. Daher ist der Abstand zwischen den Achsen doppelt so groß wie der Abstand zwischen den Achsen und dem Rahmen.

Flex-Element-Attribut (Selbstelement)

order
flex-grow
flex-shrink
flex-basis
flex
align-self
order

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

Flex-Grow

Das Flex-Grow-Attribut definiert das Vergrößerungsverhältnis des Elements. Der Standardwert ist 0, d. h. wenn noch Platz vorhanden ist, wird es nicht vergrößert.
Wenn alle Elemente eine Flex-Grow-Eigenschaft von 1 haben, teilen sie den verbleibenden Platz gleichmäßig auf.
Wenn die Flex-Grow-Eigenschaft eines Elements 2 ist und die anderen Elemente alle 1 sind, nimmt ersteres doppelt so viel verbleibenden Platz ein wie die anderen Elemente.

Flex-Shrink

Das Flex-Shrink-Attribut definiert das Schrumpfungsverhältnis des Artikels. Der Standardwert ist 1, d. h. wenn nicht genügend Platz vorhanden ist, wird der Artikel verkleinert.
Wenn die Flex-Shrink-Eigenschaft aller Elemente 1 ist und nicht genügend Platz vorhanden ist, werden sie alle proportional verkleinert.
Wenn das Flex-Shrink-Attribut eines Elements 0 und die anderen Elemente 1 sind, wird ersteres nicht verkleinert, wenn nicht genügend Platz vorhanden ist.
Negative Werte sind für diese Eigenschaft nicht gültig.

flex-basis

Die Eigenschaft „flex-basis“ definiert die Hauptgröße des Elements, bevor überschüssiger Platz zugewiesen wird.
Anhand dieses Attributs berechnet der Browser, ob auf der Hauptachse zusätzlicher Platz vorhanden ist. Der Standardwert ist auto, was der Originalgröße des Projekts entspricht.
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.

flex

Die Flex-Eigenschaft ist die Abkürzung für Flex-Grow, Flex-Shrink und Flex-Basis. Der Standardwert ist: 0 1 Auto. Die letzten beiden Eigenschaften sind optional.
Dieses Attribut hat zwei Verknüpfungswerte: auto (1 1 auto) und none (0 0 auto).

align-self

Das Attribut align-self ermöglicht die Ausrichtung eines einzelnen Elements anders als andere Elemente und überschreibt dabei das Attribut align-items.
Standardwert: auto, was bedeutet, dass das align-items-Attribut des übergeordneten Elements geerbt wird. Wenn kein übergeordnetes Element vorhanden ist, entspricht dies der Dehnung.
Dieses Attribut kann 6 Werte annehmen, außer auto, die anderen sind genau die gleichen wie das align-items-Attribut.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Observer Pattern of Javascript

Proxy Pattern of Javascript

Strategiemuster von Javascript

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Flex-Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!