Размер на флекс елемента по главната ос

Свойствата 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 ще има приоритет. Проверете това.