A flex-basis tulajdonság

A flex-basis tulajdonság egy konkrét flex blokk méretét határozza meg, mielőtt a többi flex tulajdonságot alkalmaznánk rá. Általánosságban a tulajdonság az elem méretét határozza meg a főtengely mentén. Ez azt jelenti, hogy ha a főtengely vízszintes - ez a tulajdonság az elemek szélességét határozza meg, ha pedig függőleges - akkor a magasságát.

Egy konkrét flex blokkra alkalmazható.

Ez a tulajdonság a flex rövidített tulajdonság alkotó része.

Szintaxis

szelektor {
	flex-basis: bármilyen CSS egység (és százalékok) | auto;
}

Alapértelmezett érték: auto.

Példa

Tegyük fel, hogy a főtengelyünk vízszintes, és a flex-basis értéke 50px. Ebben az esetben az elemek szélessége 50px lesz:

<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; /* tengely vízszintes */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* az elem mérete */
	border: 1px solid green;
}

Példa

Most fordítsuk meg a tengelyt anélkül, hogy megváltoztatnánk a flex-basis tulajdonság értékét. Ebben az esetben az elemek magassága lesz 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: column; /* tengely függőleges */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Lásd még

a flex-direction tulajdonság,
amely a flex blokkok tengelyirányát határozza meg
a justify-content tulajdonság,
amely a főtengely mentén történő igazítást határozza meg
a align-items tulajdonság,
amely a kereszttengely mentén történő igazítást határozza meg
a flex-wrap tulajdonság,
amely a flex blokkok többsoros voltát határozza meg
a flex-flow tulajdonság,
rövidítés a flex-direction és flex-wrap számára
a order tulajdonság,
amely a flex blokkok sorrendjét határozza meg
a align-self tulajdonság,
amely egy blokk igazítását határozza meg
a flex-grow tulajdonság,
amely a flex blokkok "kapzsiságát" határozza meg
a flex-shrink tulajdonság,
amely a flex blokkok összenyomhatóságát határozza meg
a flex tulajdonság,
rövidítés a flex-grow, flex-shrink és flex-basis számára