flex-basis Özelliği

flex-basis özelliği, diğer flex özellikleri uygulanmadan önce belirli bir flex bloğunun boyutunu belirler. Genel olarak, özellik elemanın ana eksen boyunca boyutunu belirler. Bu şu anlama gelir: eğer ana eksen yatay ise - bu özellik elemanların genişliğini belirleyecek, eğer dikey ise - o zaman yüksekliği belirleyecektir.

Belirli bir flex bloğuna uygulanır.

Bu özellik, flex kısaltma özelliğinin bir bileşenidir.

Sözdizimi

seçici {
	flex-basis: herhangi bir CSS birimi (ve yüzdeler) | auto;
}

Varsayılan değer: auto.

Örnek

Ana eksenimizin yatay olduğunu ve flex-basis değerinin 50px olduğunu varsayalım. Bu durumda elemanların genişliği 50px olacaktır:

<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; /* eksen yatay */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* elemanın boyutu */
	border: 1px solid green;
}

Örnek

Şimdi flex-basis özelliğinin değerini değiştirmeden ekseni çevirelim. Bu durumda artık elemanların yüksekliği 50px olacaktır:

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

Ayrıca Bakınız

flex bloklarının eksen yönünü belirleyen flex-direction özelliği,
ana eksen boyunca hizalamayı belirleyen justify-content özelliği,
çapraz eksen boyunca hizalamayı belirleyen align-items özelliği,
flex bloklarının çok satırlılığını belirleyen flex-wrap özelliği,
flex-direction ve flex-wrap için kısaltma olan flex-flow özelliği,
flex bloklarının sırasını belirleyen order özelliği,
bir bloğun hizalamasını belirleyen align-self özelliği,
flex bloklarının genişleme faktörünü belirleyen flex-grow özelliği,
flex bloklarının küçülme faktörünü belirleyen flex-shrink özelliği,
flex-grow, flex-shrink ve flex-basis için kısaltma olan flex özelliği,