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:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.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:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent {
  display: flex;
  flex-direction: column; /* asse verticale */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат: