Dimensione dell'elemento flex lungo l'asse principale

Le proprietà width e height definiscono la larghezza e l'altezza dell'elemento flex indipendentemente dalla direzione degli assi. Cioè, se l'asse è orizzontale, width definirà la larghezza, ma se l'asse è verticale, width continuerà a definire la larghezza. A volte questo comportamento non è conveniente.

Nel modello flex esiste una proprietà speciale flex-basis, che definisce la dimensione dell'elemento lungo l'asse principale. Ciò significa che se l'asse principale è orizzontale - questa proprietà definirà la larghezza degli elementi, mentre se è verticale - definirà l'altezza. Questa proprietà deve essere impostata sugli elementi flex stessi, non sul loro genitore. Diamo un'occhiata ad alcuni esempi.

Supponiamo che l'asse principale sia orizzontale e che flex-basis abbia il valore 50px. In questo caso la larghezza degli elementi sarà 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; /* asse orizzontale */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* dimensione elemento */
	border: 1px solid green;
}

Ora invertiamo l'asse, senza cambiare il valore della proprietà flex-basis. In questo caso sarà l'altezza degli elementi ad essere 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; /* asse verticale */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Crea 5 blocchi flex. Imposta loro una larghezza lungo l'asse principale di 100px. Osserva il comportamento dei blocchi lungo assi diversi.

Se l'asse è orizzontale e al blocco sono impostate sia la proprietà flex-basis che la proprietà width, allora flex-basis avrà la priorità. Verificalo.

Se l'asse è verticale e al blocco sono impostate sia la proprietà flex-basis che la proprietà height, allora flex-basis avrà la priorità. Verificalo.