Eigenschaft flex-basis

Die Eigenschaft flex-basis legt die Größe eines bestimmten Flex-Blocks fest, bevor die restlichen Flex-Eigenschaften auf ihn angewendet werden. Im Allgemeinen legt die Eigenschaft die Größe des Elements entlang der Hauptachse fest. Das bedeutet, dass wenn die Hauptachse horizontal ist - diese Eigenschaft die Breite der Elemente festlegt, und wenn sie vertikal ist - dann die Höhe.

Wird auf einen bestimmten Flex-Block angewendet.

Diese Eigenschaft ist ein Bestandteil der Kurzschreibweise flex.

Syntax

Selektor {
	flex-basis: beliebige CSS-Einheiten (und Prozente) | auto;
}

Standardwert: auto.

Beispiel

Nehmen wir an, die Hauptachse verläuft 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 horizontal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* Elementgröße */
	border: 1px solid green;
}

Beispiel

Lassen Sie 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 vertikal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Siehe auch

Eigenschaft flex-direction,
die die Richtung der Achsen von Flex-Blöcken festlegt
Eigenschaft justify-content,
die die Ausrichtung entlang der Hauptachse festlegt
Eigenschaft align-items,
die die Ausrichtung entlang der Querachse festlegt
Eigenschaft flex-wrap,
die die Mehrzeiligkeit von Flex-Blöcken festlegt
Eigenschaft flex-flow,
Kurzschreibweise für flex-direction und flex-wrap
Eigenschaft order,
die die Reihenfolge der Flex-Blöcke festlegt
Eigenschaft align-self,
die die Ausrichtung eines einzelnen Blocks festlegt
Eigenschaft flex-grow,
die die "Gier" von Flex-Blöcken festlegt
Eigenschaft flex-shrink,
die die Komprimierbarkeit von Flex-Blöcken festlegt
Eigenschaft flex,
Kurzschreibweise für flex-grow, flex-shrink und flex-basis