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%);
}Nach dem Login kopieren
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;
}Nach dem Login kopieren
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
Nach dem Login kopieren
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
Nach dem Login kopieren
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!
