Größe des Flex-Elements entlang der Hauptachse

Die Eigenschaften width und height legen Breite und Höhe des Flex-Elements unabhängig von der Richtung der Achsen fest. Das heißt, wenn die Achse horizontal ist, dann legt width die Breite fest, aber wenn die Achse vertikal ist, dann legt width weiterhin die Breite fest. Manchmal ist dieses Verhalten nicht praktisch.

Im Flex-Modell gibt es eine spezielle Eigenschaft flex-basis, die die Größe des Elements entlang der Hauptachse festlegt. Das bedeutet, dass wenn die Hauptachse horizontal ist - diese Eigenschaft die Breite der Elemente festlegt, und wenn sie vertikal ist - dann die Höhe. Diese Eigenschaft muss den Flex-Elementen selbst zugewiesen werden, nicht ihrem Elternelement. Lasst uns Beispiele betrachten.

Nehmen wir an, die Hauptachse ist horizontal, und flex-basis hat den Wert 50px. In diesem Fall beträgt die Breite der Elemente 50px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: row; /* Achse ist horizontal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* Größe des Elements */
	border: 1px solid green;
}

Lasst uns nun die Achse umdrehen, ohne den Wert der Eigenschaft flex-basis zu ändern. In diesem Fall wird die Höhe der Elemente 50px betragen:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: column; /* Achse ist vertikal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Erstellen Sie 5 Flex-Blöcke. Weisen Sie ihnen die Breite entlang der Hauptachse von 100px zu. Beobachten Sie das Verhalten der Blöcke entlang verschiedener Achsen.

Wenn die Achse horizontal ist und dem Block die Eigenschaft flex-basis und gleichzeitig die Eigenschaft width zugewiesen wurde, dann hat flex-basis Priorität. Überprüfen Sie dies.

Wenn die Achse vertikal ist und dem Block die Eigenschaft flex-basis und gleichzeitig die Eigenschaft height zugewiesen wurde, dann hat flex-basis Priorität. Überprüfen Sie dies.