Proprietà CSS flex-basis

La proprietà flex-basis specifica la dimensione iniziale principale di un elemento flessibile — la dimensione che ottiene prima che lo spazio libero venga distribuito da flex-grow o ridotto da flex-shrink. Quando questa proprietà non è specificata, il suo valore iniziale è auto.

La proprietà flex-basis è una delle proprietà CSS3 e ha effetto solo sugli elementi figli di un contenitore flex (un elemento con display: flex o display: inline-flex). Se il genitore non è un contenitore flex, flex-basis non ha alcun effetto.

Perché usare flex-basis?

In un layout Flexbox la dimensione di un elemento viene calcolata in due fasi:

Il browser legge il valore flex-basis dell'elemento per impostare una dimensione di partenza lungo l'asse principale.
Quindi fa crescere o ridurre ogni elemento a partire da quella dimensione iniziale per riempire (o adattarsi a) il contenitore, in base a flex-grow e flex-shrink.

Usa flex-basis quando vuoi impostare la dimensione ideale di un elemento ma lasciare comunque che si adatti. Ad esempio, flex-basis: 200px significa "punta a 200px, poi cresci/riduci da lì", mentre width: 200px è una dimensione rigida che Flexbox è più restio a ignorare.

flex-basis vs. width

Quando flex-basis è impostato su una lunghezza o percentuale, ha la precedenza su width (o height, se flex-direction è column) nel determinare la dimensione iniziale principale dell'elemento. La differenza fondamentale: flex-basis si applica sempre lungo l'asse principale, quindi segue flex-direction. Con flex-direction: row controlla la larghezza; con flex-direction: column controlla l'altezza. Un semplice width controlla sempre la dimensione orizzontale indipendentemente dalla direzione.

Quando si usa flex-basis: auto, l'elemento si affida al proprio width/height (o alla dimensione del contenuto se questi non sono impostati).

Nota: La shorthand flex imposta flex-basis insieme a flex-grow e flex-shrink. Se scrivi flex, ha la precedenza su una dichiarazione flex-basis separata — quindi inserisci flex-basis dopo flex, oppure usa direttamente la shorthand per evitare sorprese.

Valore iniziale	auto
Si applica a	Elementi flex, inclusi gli pseudo-elementi in-flow.
Ereditato	No.
Animabile	Sì. Gli elementi sono animabili.
Versione	CSS3
Sintassi DOM	object.style.flexBasis = "100px";

Sintassi

Sintassi della proprietà CSS flex-basis

flex-basis: length | percentage | auto | initial | inherit | min-content | max-content | fit-content | content;

Esempio di base

Esempio della proprietà CSS flex-basis

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 300px;
        height: 80px;
        border: 1px solid #666;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 40px;
      }
      .box div:nth-of-type(2) {
        flex-basis: 140px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;">40px</div>
      <div style="background-color: #1c87c9;">140px</div>
      <div style="background-color: #8ebf42;">40px</div>
      <div style="background-color: #cccccc;">40px</div>
      <div style="background-color: #666666;">40px</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio con tutti i valori

Esempio della proprietà flex-basis con tutti i valori:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        height: 70px;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 60px;
        padding: 15px;
      }
      .box div:first-child {
        background-color: #40c3da;
      }
      .box div:nth-of-type(2) {
        flex-basis: 40%;
        background-color: lightgreen;
      }
      .box div:nth-of-type(3) {
        flex-basis: auto;
        background-color: yellow;
      }
      .box div:nth-of-type(4) {
        flex-basis: initial;
        background-color: orange;
      }
      .box div:nth-of-type(5) {
        flex-basis: inherit;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div>
        number 60px
      </div>
      <div>
        percentage 40%
      </div>
      <div>
        auto
      </div>
      <div>
        initial
      </div>
      <div>
        inherit
      </div>
    </div>
  </body>
</html>

Provalo tu stesso »

Esempio con valori in pixel

Esempio della proprietà flex-basis specificata in pixel:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 460px;
        height: 70px;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 70px;
        padding: 15px;
      }
      .box div:first-child {
        background-color: #40c3da;
      }
      .box div:nth-of-type(2) {
        flex-basis: 100px;
        background-color: lightgreen;
      }
      .box div:nth-of-type(3) {
        background-color: #1c87c9;
      }
      .box div:nth-of-type(4) {
        flex-basis: 150px;
        background-color: orange;
      }
      .box div:nth-of-type(5) {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div>
        70px
      </div>
      <div>
        100px
      </div>
      <div>
        70px
      </div>
      <div>
        150px
      </div>
      <div>
        70px
      </div>
    </div>
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione	Provalo
length \| percentage	Una lunghezza assoluta (`px`, `em`, `rem`) o una percentuale della dimensione principale del contenitore flex. I valori negativi non sono validi.	Provalo »
auto	Il valore predefinito. L'elemento usa il proprio `width`/`height` (o la dimensione del contenuto se questi non sono impostati) come base.	Provalo »
initial	Reimposta la proprietà al suo valore predefinito (`auto`).	Provalo »
inherit	Eredita il valore dall'elemento genitore.
min-content	Dimensiona l'elemento alla sua larghezza di contenuto minima possibile (la parola o l'elemento non interrompibile più lungo).	Provalo »
max-content	Dimensiona l'elemento alla sua larghezza di contenuto massima, senza interruzione di riga.	Provalo »
fit-content	Limita la dimensione tra `min-content` e `max-content`, come la funzione `fit-content()`.	Provalo »
content	Dimensiona l'elemento in base al suo contenuto, ignorando eventuali valori impostati per `width`/`height`. Supporto limitato nei browser.	Provalo »

Errori comuni

flex-basis non ha effetto al di fuori di un contenitore flex. Il genitore deve avere display: flex o display: inline-flex.
Un valore flex-basis di 0 (o 0%) combinato con flex-grow: 1 distribuisce lo spazio proporzionalmente solo in base al fattore di crescita, ignorando la dimensione del contenuto — è così che funzionano molti layout a "colonne uguali".
Le percentuali vengono risolte rispetto alla dimensione principale del contenitore, non del viewport. Se il contenitore non ha una dimensione definita sull'asse principale, un flex-basis percentuale può comportarsi come auto.
La shorthand flex sovrascrive flex-basis. Scrivere flex: 1 reimposta la base a 0%, il che può sovrascrivere una dichiarazione flex-basis precedente.

Proprietà correlate

flex — la shorthand per flex-grow, flex-shrink e flex-basis.
flex-grow — quanto un elemento cresce rispetto alla sua base.
flex-shrink — quanto un elemento si riduce rispetto alla sua base.
La Guida Completa a Flexbox — il modello completo di Flexbox in un unico posto.

Esercitati

Pratica

Cosa fa la proprietà 'flex-basis' in CSS?

Definisce la dimensione di un elemento flex.Cambia il colore di un elemento flex.Imposta la dimensione iniziale principale di un elemento flex.Controlla completamente l'ordinamento degli elementi flex.Elimina un elemento flex.