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

Utilisable sur

HTML

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)

CSS Flexible Box Layout Module Level 1

Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de `flex-basis`.

Schéma syntaxique de la propriété flex-basis
Les liens du schéma donnent accès à plus de détails
Télécharger le schéma en SVG

Description des termes utilisés sur le schéma :

length est une valeur numérique, positive ou nulle, suivie d'une des unités de dimension.

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 flex-box pour une présentation générale des possibilités et de l'utilisation des flex-box.

Valeurs pour `flex-basis`.

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 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).

Valeurs communes à toutes les propriétés :


flex-basis: initial  (auto)
flex-basis: inherit
flex-basis: revert
flex-basis: revertLayer
flex-basis: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'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

Accéder à la propriété `flex-basis` par programme.

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).


	let el = document.getElementById('id');
	el.style['flex-basis'] = '2cm';
	// ou
	let el = document.getElementById('id');
	el.style.flexBasis = '2cm';

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.


	let el = document.getElementById('id');
	let value = el.style['flex-basis'];
	// ou
	let el = document.getElementById('id');
	let value = 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, ou encore de la valeur initiale de la propriété (auto dans le cas de flex-basis). Quoiqu'il en soit, la valeur calculée est toujours définie.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('flex-basis');

Modifier la valeur de la propriété `flex-basis` avec JQuery.


 $('#id').css('flex-basis', '2cm');
 // ou
 $('#id').css('flexBasis', '2cm');

Lire la valeur calculée de la propriété `flex-basis` avec JQuery.

Comme en Javascript, la valeur calculée est, soit la valeur affectée, soit une valeur héritée, soit encore la valeur initiale.


	let value = $('#id').css('flex-basis');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons vous permettent de tester comment est mémorisé la valeur de flex-basis, particulièrement le deuxième bouton qui affiche la valeur calculée. On constate en particulier que, si les pourcentages sont bien conservées en tant que tel, toutes les autres unités snot converties en pixels.

Exemple interactif avec la propriété `flex-basis`.

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.

Les flex-box

Une révolution pour simplifier les mises en page complexes

Flex-box remplace avantageusement les éléments flottants

Compatibilité des navigateurs avec `flex-basis`.

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 des conteneurs flex-box de façon générale.

Colonne 2

Support de la propriété flex-basis utilisable dans le contexte d'un élément de flex-box.

Remarques :

(1) Implémentation partielle. De nombreux bogues présents.

(2) Quand flex-basis est positionné sur une valeur différente de auto, IE calcule les dimensions des éléments comme s'il s'agissait de boîtes classiques, et ceci quelque soit la valeur donnée à box-sizing.

Support des
Flex-box

Propriété
flex-basis

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `flex-basis`.

Module CSS - Mise en page par flex-box - Niveau 1

Première introduction de la propriété flex-basis.

23 Juillet 2009
Document de travail.
18 Septembre 2012
Candidat à la recommandation.

Voir aussi, à propos des flex-box.

Les spécificités des flex-box sont dans le module CSS Flexible Box Layout Module. La propriété flex-basis y figure, ainsi que toutes celles qui sont listée ci-dessous.

Propriétés :

flex

Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.

flex-direction

Choisit l'axe principal et l'axe secondaire d'un flex box.

flex-flow

Enchaînement des éléments enfant dans un flex-box.

flex-grow

Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.

flex-shrink

Autorise ou non la compression d'un élément contenu dans un flex-box.

flex-wrap

Gestion des retours à la ligne dans un container flex-box.

order

Définit l'ordre des éléments dans un flex-box.