Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

flex-basis - Propriété CSS

flex-basis

Résumé des caractéristiques de la propriété flex-basis

Description rapide
Détermine la dimension par défaut d'un élément contenu dans un flex-box.
Statut
Standard
Type de valeur
Dimension+ | Pourcentage+ | Contenu
Valeurs prédéfinies
auto | content | min-content | max-content | fit-content
Pourcentages
Calculés par rapport à la dimension principale du container flex.
Valeur initiale
auto
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété flex-basis passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Mise en page par flex-box
Références (W3C)
Statut du document:: CR (document proposé pour la recommandation)

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.

Syntaxe de flex-basisSchéma syntaxique de la propriété CSS flex-basis (dimenion des éléments dans un conteneur flex). auto auto content content min-content min-content max-content max-content fit-content fit-content length length % %flex-basis:;flex-basis:;Télécharger l'image en SVG
  • 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 si width n'est pas définie ou fixée à auto. Dans ce cas, les valeurs auto et content 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.

Premier élément
Deuxième élément
Troisième élément

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.

flex-basis :
Les flex-box
Une révolution pour simplifier les mises en page complexes
Flex-box remplace avantageusement les éléments flottants

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.

Colonne 1
Prise en charge générale des conteneurs flex-box.
Colonne 2
Compatibilité des navigateurs avec la propriété CSS flex-basis.
1
Flex˗box
2
flex-basis
Estimation de la prise en charge en pourcentage du parc actuel.
98%
95%

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.

Propriétés.

Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.
Choisit l'axe principal et l'axe secondaire d'un flex box.
Echaînement des éléments enfant dans un flex-box.
Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.
Autorise ou non la compression d'un élément contenu dans un flex-box.
Gestion des retours à la ligne dans un container flex.
Ordre des éléments dans un flex-box.