Flex-basis xususiyati

flex-basis xususiyati unga boshqa flex xususiyatlari qo‘llanilishidan oldin aniq flex-blokning o‘lchamini belgilaydi. Umuman olganda, xususiyat elementning asosiy o‘q bo‘ylab o‘lchamini belgilaydi. Bu shuni anglatadiki, agar asosiy o‘q gorizontal bo‘lsa - bu xususiyat elementlarning kengligini belgilaydi, agar vertikal bo‘lsa - balandlikni.

Aniq flex blokkka qo‘llaniladi.

Ushbu xususiyat flex qisqartirilgan xususiyatning tarkibiy qismidir.

Sintaksis

selector {
	flex-basis: har qanday CSS birliklari (va foizlar) | auto;
}

Standart qiymat: auto.

Misol

Faraz qilaylik, asosiy o‘qimiz gorizontal joylashgan va flex-basis ning qiymati 50px. Bunda elementlarning kengligi 50px bo‘ladi:

<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; /* o‘q gorizontal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* element o‘lchami */
	border: 1px solid green;
}

Misol

Keling, endi flex-basis xususiyatining qiymatini o‘zgartirmay, o‘qni aylantiramiz. Bunda elementlarning balandligi 50px bo‘ladi:

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

Shuningdek qarang

flex-direction xususiyati,
bu flex bloklarning o‘qlar yo‘nalishini belgilaydi
justify-content xususiyati,
bu asosiy o‘q bo‘yicha tekislashni belgilaydi
align-items xususiyati,
bu o‘tmas o‘q bo‘yicha tekislashni belgilaydi
flex-wrap xususiyati,
bu flex bloklarning ko‘p qatorliligini belgilaydi
flex-flow xususiyati,
flex-direction va flex-wrap uchun qisqartma
order xususiyati,
bu flex bloklarning tartibini belgilaydi
align-self xususiyati,
bu bitta blokning tekislanishini belgilaydi
flex-grow xususiyati,
bu flex bloklarning ochko‘zligini belgilaydi
flex-shrink xususiyati,
bu flex bloklarning siqiluvchanligini belgilaydi
flex xususiyati,
flex-grow, flex-shrink va flex-basis uchun qisqartma