Was bedeutet Flex-Wert 1 in CSS3?

Das bedeutet: Der Vergrößerungsverhältniswert des Elements „Flex-Grow“ ist 1, der Verkleinerungsverhältniswert des Elements „Flex-Shrink“ ist 1 und der vom Element „Flex-Basis“ eingenommene Platz ist „0“. %“; Flex ist „Flex-Grow“, die Abkürzung der drei Attributwerte von „Flex-Shrink, Flex-Basis“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was bedeutet der Flex-Wert 1 in CSS3?

Flex ist eigentlich die Abkürzung der Kombination dieser drei Attributwerte: Flex-Grow Flex-Shrink Flex-Basis Die Entsprechungen sind wie folgt:

Syntax:

auto | none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

Definition:

• Flex-Grow: Definieren Sie das Vergrößerungsverhältnis des Elements. Der Standardwert ist 0. Wenn also noch Platz vorhanden ist, wird es nicht vergrößert.

• flex-shrink: Definiert das Schrumpfverhältnis des Artikels. Der Standardwert ist 1. Das heißt, wenn nicht genügend Platz vorhanden ist, wird der Artikel verkleinert.

• flex-basis: Definiert den vom Element belegten Platz, 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. Wenn der Wert 0 ist, müssen Einheiten hinzugefügt werden, um nicht als skalierbar zu gelten.

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.

Detaillierte Einführung:

Flex-grow

Das Flex-Grow-Attribut definiert das Vergrößerungsverhältnis des Elements. Der Standardwert ist 0, dh wenn noch Platz vorhanden ist, wird es nicht vergrößert Das Flex-Grow-Attribut aller Elemente ist 1. Sie teilen 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.

Flex-shrink

Die Flex-shrink-Eigenschaft definiert das Schrumpfungsverhältnis des Artikels. Der Standardwert ist 1. Das heißt, wenn nicht genügend Platz vorhanden ist, wird der Artikel verkleinert. Das Flex-Shrink-Attribut definiert das Schrumpfungsverhältnis des Artikels. Der Standardwert ist 1, dh wenn nicht genügend Platz vorhanden ist, wird der Artikel verkleinert.

Wenn die Flex-Schrumpf-Eigenschaft aller Artikel 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.

Flex-Basis

Die Flex-Basis-Eigenschaft definiert die Hauptgröße des Elements, 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.

.item {
flex: 1;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}

.item {
flex: auto;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}

.item {
flex: none;
}
/* 等同 */
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}

.item {
flex: 1 2;
}
/* 等同 */
.item {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 0%;
}

(Teilen von Lernvideos:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonWas bedeutet Flex-Wert 1 in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!