Was sind die Eigenschaften des CSS-Flex-Layouts (elastisches Layout)? Einführung in CSS-Flex-Layout-Eigenschaften

In diesem Artikel erfahren Sie, welche Eigenschaften das CSS-Flex-Layout (elastisches Layout) hat. Die Einführung von CSS-Flex-Layout-Eigenschaften hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Flex ist die Abkürzung für Flexible Box, was „flexibles Layout“ bedeutet und verwendet wird, um maximale Flexibilität für kastenförmige Modelle zu bieten. Jeder Container kann als Flex-Layout festgelegt werden.
Hinweis: Nach der Einstellung auf das Flex-Layout sind die Attribute „float“, „clear“ und „vertikal-align“ der untergeordneten Elemente ungültig.

Grundkonzepte

Elemente, die das Flex-Layout verwenden, werden als Flex-Container (Flex-Container) bezeichnet, die als „Container“ bezeichnet werden. Alle seine untergeordneten Elemente werden automatisch zu Containermitgliedern, die als Flex-Elemente (Flex-Elemente) oder kurz „Elemente“ bezeichnet werden.
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 Queranfang bezeichnet, und die Endposition wird als Querende bezeichnet.

Containerattribut

1. CSS-Flexrichtung

Das Flexrichtungsattribut bestimmt die Hauptachse Die Richtung (d. h. die Anordnungsrichtung der Elemente)
flex-direction: row | row-reverse | Column-reverse: Die Hauptachse ist horizontal und der Startpunkt ist am linken Ende.
Zeilenumkehr: Die Hauptachse ist horizontal und der Startpunkt liegt am rechten Ende.
Spalte: Die Hauptachse ist vertikal und der Startpunkt liegt am oberen Rand.
Spaltenumkehr: Die Hauptachse ist vertikal und der Startpunkt liegt am unteren Rand.

2. CSS-Flex-Wrap (Zeilenumbruch)

Flex-Wrap Standardmäßig werden Elemente auf einer Linie (auch „Achse“ genannt) angeordnet. Das Flex-Wrap-Attribut definiert, wie umgebrochen wird, wenn eine Achse nicht passt.

flex-wrap: nowrap |.
nowrap (Standard): kein Zeilenumbruch.
Wrap: Wrap, mit der ersten Zeile oben.
Wrap-Reverse: Wrap, die erste Zeile ist unten.

3. CSS-Flex-Flow

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

flex-flow: ;

4.justify-content-Attributdefinition Richtet das Element auf der Hauptachse aus. justify-content: Flex-Start | > center: Zentriert space-between: Richten Sie beide Enden aus und die Abstände zwischen den Elementen sind 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.

5. align-items


Das align-items-Attribut definiert, wie die Elemente auf der Querachse ausgerichtet werden.
align-items: flex-start |. flex-end |.

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. Strecken (Standardwert): Wenn das Element keine Höhe festlegt oder auf „Auto“ eingestellt ist, nimmt es die gesamte Höhe des Containers ein.

6. align-content


Das align-content-Attribut definiert die Ausrichtung mehrerer Achsen. Wenn das Element nur eine Achse hat, hat diese Eigenschaft keine Auswirkung.
space-between | Querachse auf den Startpunkt ausgerichtet.
Flex-Ende: Ausgerichtet am Endpunkt der Querachse.

Mitte: Ausgerichtet am Mittelpunkt der Querachse.

Abstand dazwischen: An beiden Enden der Querachse ausrichten und die Abstände zwischen den Achsen gleichmäßig verteilen. Raum-um: Die Abstände auf beiden Seiten jeder Achse sind gleich. Daher ist der Abstand zwischen den Achsen doppelt so groß wie der Abstand zwischen den Achsen und dem Rahmen. Strecken (Standardwert): Die Achse nimmt die gesamte Querachse ein.

Artikelattribute




1. Reihenfolge

Das Bestellattribut definiert die Reihenfolge, in der Artikel angezeigt werden sind sortiert. Je kleiner der Wert, desto höher die Rangfolge. Der Standardwert ist 0. 2. CSS-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 (falls vorhanden) 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.
* kann zur Implementierung von Zwei-Punkt- und Drei-Punkt-Layouts verwendet werden

3. Das Flex-Shrink-Attribut definiert das Schrumpfungsverhältnis des Elements ist der Standardwert 1, d. h. wenn nicht genügend Platz vorhanden ist, wird das Element verkleinert. Wenn die Flex-Shrink-Eigenschaft aller Elemente 1 ist und nicht genügend Platz vorhanden ist, werden sie alle proportional verkleinert. Wenn die Flex-Shrink-Eigenschaft eines Elements 0 und die der anderen Elemente 1 ist, wird ersteres nicht verkleinert, wenn nicht genügend Platz vorhanden ist.

Negative Werte sind für diese Eigenschaft nicht gültig.

4. CSS-Flex-Basis

Das Flex-Basis-Attribut definiert den Hauptachsenraum (Hauptgröße), den das Element einnimmt, bevor überschüssiger Platz zugewiesen wird. Der Browser verwendet dieses Attribut, um zu berechnen, 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.

5. CSS-Flex

Das Flex-Attribut 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).

Es wird empfohlen, dieses Attribut zuerst zu verwenden, anstatt drei separate Attribute separat zu schreiben, da der Browser die relevanten Werte ableitet.

6. align-self

Das align-self-Attribut ermöglicht eine andere Ausrichtung eines einzelnen Elements als andere Elemente und kann das align-items-Attribut überschreiben. Der Standardwert ist auto, was bedeutet, dass das align-items-Attribut des übergeordneten Elements geerbt wird. Wenn kein übergeordnetes Element vorhanden ist, entspricht dies der Dehnung.

Verwandte Empfehlungen:

CSS

alte Versionflex und kompatibel_html/css_WEB-ITnose

CSS

Flex-Box-Beispielcode_html/css_WEB-ITnose

CSS

Flex-Box-ModellAnwendung von Flexim Layout

Das obige ist der detaillierte Inhalt vonWas sind die Eigenschaften des CSS-Flex-Layouts (elastisches Layout)? Einführung in CSS-Flex-Layout-Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!