flex-basis - Propriété CSS
Résumé des caractéristiques de la propriété flex-basis
auto
| content
| min-content
| max-content
| fit-content
auto
flex-basis
passe progressivement d'une valeur à une autre.Description de la propriété flex-basis
.
flex-basis
définit la largeur de base des éléments dans un container flex-box.
On parle de "largeur de base" car les propriétés flex-grow
et flex-shrink
peuvent autoriser l'élément à s'agrandir ou se contracter en fonction de la place disponible.
Remarque : en fait flex-basis
n'agit pas forcément sur la largeur : elle agit sur la dimension suivant
l'axe principal. Mais comme ce dernier est le plus souvent l'axe horizontal, flex-basis
agit le plus
souvent sur la largeur.
Mais pour un container dont l'axe principal serait vertical, flex-basis
agirait sur la hauteur.
L'axe principal d'un flex-box se définit par la propriété flex-direction
.
Les trois propriétés flex-basis
, flex-grow
et flex-shrink
ont un rôle tellement
complémentaire que nous vous recommandons de les définir ensemble avec la propriété résumée flex
.
flex-basis
doit être utilisée sur les éléments contenus dans un flex-box. Il est inutile de l'appliquer au container.
Reportez-vous à notre tutoriel sur les flex-box pour une présentation générale des possibilités et de l'utilisation des flex-box.
Syntaxes pour flex-basis
.
length
est une valeur numérique suivie d'une unité de dimension.
- flex-basis: auto;
Valeur par défaut. La largeur de l'élément dans le flex-box est déterminée par sa largeur intrinsèque si elle est spécifiée (avec la propriété
width
) ou par son contenu siwidth
n'est pas définie ou fixée àauto
. Dans ce cas, les valeursauto
etcontent
appliquées àflex-basis
sont équivalentes. - flex-basis: content; flex-basis: min-content; flex-basis: max-content; flex-basis: fit-content;
La largeur de base de l'élément est déterminée d'après son contenu.
Reportez-vous à la description de ces valeurs pour plus de précision :min-content
,max-content
,fit-content
. - flex-basis: 200px;
Une valeur numérique, positive ou nulle, avec une unité de dimension (voir les unités CSS de dimension).
Si la valeur est exprimée en pourcentage, celui-ci est calculé par rapport à la dimension principale du container flex (la largeur le plus souvent).
- flex-basis:
initial
; flex-basis:inherit
; flex-basis:revert
; flex-basis:revert-layer
; flex-basis:unset
;La valeur initiale est :
.auto
Animation de flex-basis
.
La propriété flex-basis
peut facilement être animée et passera progressivement d'une valeur à l'autre.
Attention cependant au fait que les propriétés flex-shrink
et flex-grow
peuvent contrarier
l'animation en rendant les éléments élastiques autour de leur dimension de base.
Pour éviter ce problème, ces deux propriétés ont été fixées à 0
dans l'exemple ci-dessous.
Manipulation de la propriété flex-basis
par programme.
Dans les exemples de code ci-après, le paramètre el
représente l'élément de la page sur lequel on souhaite travailler.
C'est à dire dans cet exemple, le premier élément du flex-box présenté ci-dessous (l'élément qui est encadré en noir).
Modifier la valeur de flex-basis
en Javascript.
Voici comment modifier la valeur de flex-basis
en Javascript, pour un élément el
.
On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case
(un tiret pour séparer les mots),
et une autre syntaxe avec la notation en camel-case
(une majuscule pour séparer les mots).
function setFlexBasis(el) {
el.style['flex-basis']='50px';
// ou
el.style.flexBasis='50px';
}
Lire en Javascript la valeur de flex-basis
.
Le code ci-après renvoie la valeur de flex-basis
, à condition que cette propriété ait été définie dans l'attribut style
de l'élément. Les valeurs définies via un sélecteur CSS ne sont pas récupérables avec ce code.
function getFlexBasis(el) {
alert(el.style['flex-basis']);
// ou
alert(el.style.flexBasis);
}
Lire la valeur calculée de flex-basis
en Javascript.
La valeur calculée est celle qui est définie pour l'élément ou, à défaut, de la prise en compte de la cascade d'héritages.
Dans le cas de flex-basis
, la valeur est retournée telle qu'elle a été définie : dans la même unité, ou sous la forme d'un mot-clé prédéfini.
C'est inhabituel : les autres propriétés de dimension ont généralement une valeur calculées exprimée en pixels.
function getCalcFlexBasis(el) {
alert(window.getComputedStyle(el).getPropertyValue('flex-basis'));
}
Modifier la valeur de la propriété flex-basis
avec JQuery.
function setFlexBasis(el) {
$(el).css('flex-basis','min-content');
// ou
$(el).css('flexBasis','min-content');
}
Lire la valeur calculée de la propriété flex-basis
avec JQuery.
Comme en Javascript, la valeur est retournée sous la forme dans laquelle elle a été définie : même unité ou mot-clé.
function getCalcFlexBasis(el) {
alert($(el).css('flex-basis'));
// ou
alert($(el).css('flexBasis'));
}
Simulateur.
La largeur des blocs dans le flex-box a été fixée à 200 pixels (width:200px;
).
C'est cette largeur qui est utilisée lorsque flex-basis
a la valeur auto
.
Les propriétés flex-grow
et flex-shrink
ont été fixées à la valeur 0
.
Autrement dit les éléments ne sont pas autorisés à s'agrandir, ni à se contracter.
Pour cette raison ils peuvent déborder du container, ou a contraire ne pas le remplir entièrement.
Prise en charge par les navigateurs (compatibilité).
Aucun problème à signaler concernant la prise en charge de la propriété flex-basis
par les navigateurs récents.
flex-basis
.
flex-basis
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que flex-basis
.
Les spécifications CSS éditées par le W3C sont organisées en modules. flex-basis
fait partie du Module CSS - Mise en page par flex-box (CSS Flexible Box Layout Module). Les définitions suivantes sont également décrites dans ce même module.