Flex-basis xassəsi

flex-basis xassəsi konkret flex blokuna digər flex xassələri tətbiq edilməzdən əvvəl onun ölçüsünü təyin edir. Ümumiyyətlə, xassə elementin əsas ox boyunca ölçüsünü təyin edir. Bu o deməkdir ki, əgər əsas ox üfüqi olarsa - bu xassə elementlərin enini təyin edəcək, əgər şaquli olarsa - onda hündürlüyü.

Konkret flex blokuna tətbiq edilir.

Bu xassə flex qısaldılmış xassəsinin tərkib hissəsidir.

Sintaksis

selektor {
	flex-basis: istənilən CSS vahidləri (və faizlər) | auto;
}

Susmaya görə qiymət: auto.

Nümunə

Tutaq ki, əsas oxumuz üfüqi yerləşir və flex-basis xassəsinin qiyməti 50px olur. Bu halda elementlərin eni 50px olacaq:

<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; /* ox üfüqi */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* elementin ölçüsü */
	border: 1px solid green;
}

Nümunə

Gəlin indi oxu çevirək, flex-basis xassəsinin qiymətini dəyişmədən. Bu halda artıq elementlərin hündürlüyü 50px olacaq:

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

Həmçinin bax

flex-direction xassəsi,
ki, flex bloklarının ox istiqamətini təyin edir
justify-content xassəsi,
ki, əsas ox boyunca düzləndirməni təyin edir
align-items xassəsi,
ki, çarpaz ox boyunca düzləndirməni təyin edir
flex-wrap xassəsi,
ki, flex bloklarının çoxsətirliliyini təyin edir
flex-flow xassəsi,
flex-direction və flex-wrap üçün qısaldılmış forması
order xassəsi,
ki, flex bloklarının sırasını təyin edir
align-self xassəsi,
ki, bir blokun düzləndirilməsini təyin edir
flex-grow xassəsi,
ki, flex bloklarının genişlənmə qabiliyyətini təyin edir
flex-shrink xassəsi,
ki, flex bloklarının daralma qabiliyyətini təyin edir
flex xassəsi,
flex-grow, flex-shrink və flex-basis üçün qısaldılmış forması