Flex-basis хусусияти

flex-basis хусусияти унга бошқа flex хусусиятлари қўлланмасдан олдин аник flex-блокнинг ўлчамини белгилайди. Умуман олганда, бу хусусият элементнинг асос ўқи бўйича ўлчамини белгилайди. Демак, агар асос ўқи горизонтал бўлса - бу хусусият элементларнинг энини белгилайди, агар вертикал бўлса - у ҳолда бўйини.

Аник flex блокка қўлланилади.

Бу хусусият flex қисқартирилган хусуятнинг бир қисмидир.

Синтаксис

селектор {
	flex-basis: ҳар қандай CSS ўлчов бирликлари (ва фоизлар) | auto;
}

Стандарт қиймат: auto.

Мисол

Асос ўқи горизонтал жойлашган, ва flex-basis хусуятининг қиймати 50px бўлсин. Бу ҳолда элементларнинг эни 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; /* ўқ горизонтал */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* элемент ўлчами */
	border: 1px solid green;
}

Мисол

Келинг энди асос ўқни айлантириб қўйайлик, flex-basis хусусиятининг қийматини ўзгартирмай. Бу ҳолда элементларнинг бўйи 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; /* ўқ вертикал */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Шунингдек қаранг

flex-direction хусусияти,
бу flex блоклар ўқи йўналишини белгилайди
justify-content хусусияти,
бу асос ўқ бўйича текислашни белгилайди
align-items хусусияти,
бу қўшма ўқ бўйича текислашни белгилайди
flex-wrap хусусияти,
бу flex блокларнинг кўп қatorлигини белгилайди
flex-flow хусусияти,
flex-direction ва flex-wrap учун қисқартирма
order хусусияти,
бу flex блоклар тартибини белгилайди
align-self хусусияти,
бу бир блокнинг текисланишини белгилайди
flex-grow хусусияти,
бу flex блокларнинг қўзғоқлигини белгилайди
flex-shrink хусусияти,
бу flex блокларнинг қисқаришини белгилайди
flex хусусияти,
flex-grow, flex-shrink ва flex-basis учун қисқартирма