Proprietà flex-basis

La proprietà flex-basis imposta la dimensione di un blocco flex specifico prima che gli vengano applicate le altre proprietà flex. In generale, la proprietà imposta la dimensione dell'elemento lungo l'asse principale. Ciò significa che se l'asse principale è orizzontale - questa proprietà imposterà la larghezza degli elementi, se è verticale - imposterà l'altezza.

Si applica a un blocco flex specifico.

Questa proprietà è una parte costitutiva della proprietà abbreviata flex.

Sintassi

selettore {
	flex-basis: qualsiasi unità CSS (e percentuali) | auto;
}

Valore predefinito: auto.

Esempio

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;
}

Esempio

Ora invertiamo l'asse, senza cambiare il valore della proprietà flex-basis. In questo caso sarà l'altezza degli elementi a 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;
}

Vedi anche

proprietà flex-direction,
che imposta la direzione degli assi dei blocchi flex
proprietà justify-content,
che imposta l'allineamento lungo l'asse principale
proprietà align-items,
che imposta l'allineamento lungo l'asse trasversale
proprietà flex-wrap,
che imposta l'avvolgimento multilinea dei blocchi flex
proprietà flex-flow,
abbreviazione per flex-direction e flex-wrap
proprietà order,
che imposta l'ordine dei blocchi flex
proprietà align-self,
che imposta l'allineamento di un singolo blocco
proprietà flex-grow,
che imposta la "ingordigia" dei blocchi flex
proprietà flex-shrink,
che imposta la comprimibilità dei blocchi flex
proprietà flex,
abbreviazione per flex-grow, flex-shrink e flex-basis