Големина на флекс елемент по должина на главната оска

Својствата width и height ја одредуваат ширината и висината на флекс елементот независно од насоката на оските. То ест, ако оската е хоризонтална, тогаш width ќе ја одредува ширината, но ако оската е вертикална, тогаш width сепак ќе ја одредува ширината. Понекогаш таквото однесување не е погодно.

Во флекс моделот постои посебно својство flex-basis, кое ја одредува големината на елементот по должина на главната оска. Ова значи дека ако главната оска е хоризонтална - ова својство ќе ја одредува ширината на елементите, а ако е вертикална - тогаш висината. Ова својство треба да се задава на самите flex елементи, а не на нивниот родител. Ајде да погледнеме на примери.

Нека сега главната оска е хоризонтална, а 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;
}

Направете 5 флекс-блокови. Задајте им ширина по должина на главната оска од 100px. Погледнете го однесувањето на блоковите по должина на различни оски.

Ако оската е хоризонтална и на блокот е зададено својство flex-basis и истовремено својство width, тогаш flex-basis ќе има приоритет. Проверете го ова.

Ако оската е вертикална и на блокот е зададено својство flex-basis и истовремено својство height, тогаш flex-basis ќе има приоритет. Проверете го ова.