Detaillierte Erläuterung des Flex-Layouts in CSS3

1. Bestellattribut

Das Bestellattribut definiert die Reihenfolge der Artikel. Je kleiner der Wert, desto höher die Rangfolge. Der Standardwert ist 0.

2. Flex-Grow-Attribut

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.

3. Flex-Shrink-Attribut

Das Flex-Shrink-Attribut definiert das Schrumpfungsverhältnis des Artikels. Der Standardwert ist 1, das heißt, 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 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. Flex-Basis-Attribut

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

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.

6. align-self-Attribut

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. Dieses Attribut kann 6 Werte annehmen, mit Ausnahme von auto, die anderen sind genau die gleichen wie das align-items-Attribut.

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