Dimensiunea elementului flex de-a lungul axei principale

Proprietățile width și height stabilesc lățimea și înălțimea elementului flex independent de direcția axelor. Adică, dacă axa este orizontală, atunci width va seta lățimea, dar dacă axa este verticală, atunci width în continuare va seta lățimea. Uneori acest comportament nu este convenabil.

În modelul flex există o proprietate specială flex-basis, care stabilește dimensiunea elementului de-a lungul axei principale. Aceasta înseamnă că dacă axa principală este orizontală - această proprietate va seta lățimea elementelor, iar dacă este verticală - atunci înălțimea. Această proprietate trebuie setată elementelor flex în sine, nu părintelui lor. Să vedem pe exemple.

Să presupunem că acum axa principală este orizontală, iar flex-basis are valoarea 50px. În acest caz, lățimea elementelor va fi 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; /* axa orizontală */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* dimensiunea elementului */
	border: 1px solid green;
}

Acum să inversăm axa, fără a modifica valoarea proprietății flex-basis. În acest caz deja înălțimea elementelor va fi 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; /* axa verticală */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Creați 5 blocuri flex. Setați-le lățimea de-a lungul axei principale la 100px. Observați comportamentul blocurilor de-a lungul diferitelor axe.

Dacă axa este orizontală și blocului i se setează proprietatea flex-basis și simultan proprietatea width, atunci flex-basis va avea prioritate. Verificați acest lucru.

Dacă axa este verticală și blocului i se setează proprietatea flex-basis și simultan proprietatea height, atunci flex-basis va avea prioritate. Verificați acest lucru.