Rozmiar elementu flex wzdłuż osi głównej

Właściwości width i height określają szerokość i wysokość elementu flex niezależnie od kierunku osi. To znaczy, jeśli oś jest pozioma, to width będzie określać szerokość, ale jeśli oś jest pionowa, to width nadal będzie określać szerokość. Czasami takie zachowanie jest niewygodne.

W modelu flex istnieje specjalna właściwość flex-basis, która określa rozmiar elementu wzdłuż osi głównej. Oznacza to, że jeśli oś główna jest pozioma - ta właściwość będzie określać szerokość elementów, a jeśli pionowa - to wysokość. Tę właściwość należy ustawiać samym elementom flex, a nie ich rodzicowi. Spójrzmy na przykładach.

Załóżmy, że oś główna jest pozioma, a flex-basis ma wartość 50px. W tym przypadku szerokość elementów wyniesie 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; /* oś pozioma */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* rozmiar elementu */
	border: 1px solid green;
}

Odwróćmy teraz oś, nie zmieniając wartości właściwości flex-basis. W tym przypadku to wysokość elementów wyniesie 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; /* oś pionowa */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Utwórz 5 bloków flex. Ustaw im szerokość wzdłuż osi głównej na 100px. Przyjrzyj się zachowaniu bloków wzdłuż różnych osi.

Jeśli oś jest pozioma i blok ma ustawioną właściwość flex-basis i jednocześnie właściwość width, to flex-basis będzie miało priorytet. Sprawdź to.

Jeśli oś jest pionowa i blok ma ustawioną właściwość flex-basis i jednocześnie właściwość height, to flex-basis będzie miało priorytet. Sprawdź to.