Proprietà flex-basis CSS

Definizione e uso

L'attributo flex-basis determina la lunghezza iniziale dell'elemento flessibile.

Nota:Se l'elemento non è un elemento flessibile, l'attributo flex non è valido.

Vedi anche:

Corso CSS: Casella flessibile CSS

Manuale CSS:Proprietà flex

Manuale CSS:Proprietà flex-direction

Manuale CSS:Proprietà flex-flow

Manuale CSS:Proprietà flex-grow

Manuale CSS:Proprietà flex-shrink

Manuale CSS:Proprietà flex-wrap

Manuale HTML DOM:Proprietà flexBasis

Esempio

Imposta la lunghezza iniziale del secondo elemento flessibile a 100 pixel:

div:nth-of-type(2) {
  flex-basis: 100px;
}

Prova personalmente

Sintassi CSS

flex-basis: number|auto|initial|inherit;

Valore dell'attributo

Valore Descrizione
number Unità di lunghezza o percentuale, che definisce la lunghezza iniziale dell'elemento flessibile.
auto Valore predefinito. La lunghezza è uguale alla lunghezza dell'elemento flessibile. Se l'elemento non ha una lunghezza specificata, la lunghezza sarà basata sul suo contenuto.
initial Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit Incorpora questo attributo alla lunghezza dell'elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: auto
Ereditarietà: No
Produzione animazione: Supportato. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.flexBasis="200px"

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

I numeri con -webkit- o -moz- indicano la versione iniziale che utilizza il prefisso.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0