flex-basis CSS propriété

flex-basis : auto;
flex-basis : content;
flex-basis : 105px; 
flex-basis : 30%;

Règles de syntaxes CSS pour flex-basis.

Calcul d'une valeur en %

Si flex-direction:row*, la valeur est calculée en fonction de la valeur calculée de la propriété CSS width du conteneur Flexbox.

Si flex-direction:column*, la valeur est calculée en fonction de la valeur calculée de la propriété CSS height du conteneur Flexbox.

flex-basis vs width et flex-basis vs height

Si la valeur flex-basis est autre que content ou auto et que la propriété Css width ou height a été spécifié, alors selon les cas de flex-direction, la valeur de la propriété CSS height ou width est ignorée au profit de la valeur de flex-basis quelle que soit la valeur de flex-grow et de flex-shrink.

Si la valeur flex-basis est content ou auto et que la propriété Css width ou height a été spécifié, alors selon les cas de flex-direction, la valeur de la propriété CSS height ou width est prise comme taille initiale.

Equivalence de la valeur content

Pour avoir le même résultat visuel que content en utilisant flex-basis : auto.

item-flexboxe{
  flex-basis : auto;
  width : auto; /* ou height suivant les cas */
}

Valeur omise dans la propriété Css flex

Si vous omettez flex-basis dans la déclaration du raccourci Css flex, sa valeur ne sera plus auto mais 0%.

Dépend de la valeur de flex-direction

*) Dépend de la valeur de flex-direction :

• flex-direction:row*, alors flex-basis représente width.
• flex-direction:column*, alors flex-basis représente height.

Compatibilités navigateurs de la propriété flex-basis

Propriétés CSS préfixées de flex-basis

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété flex-basis CSS :

Pour rendre compatible la propriété flex-basis CSS avec le plus grand nombre de navigateurs, vous devez utiliser les versions préfixées suivante :

-webkit-flex-basis : 33.3333333%;
flex-basis : 33.3333333%;

/* Certains anciens navigateurs n'ont pas de propriété flex-basis mais un équivalent à la propriété flex */

Votre avis sur la définition flex-basis en CSS