CSS - Propriété flex-basis

Description de la propriété flex-basis.

flex-basis définit la largeur de base des éléments dans un container flex-box. Nous parlons 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 dans 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é raccourcie flex.

flex-basis n'a d'effet que sur les éléments contenus dans un flex-box.

Syntaxes 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 (propriété Object) ou par son contenu si Object n'est pas définie ou fixée à auto (dans ce cas, les valeurs auto et content sont équivalentes).

• flex-basis: content; ⚠

  La largeur de base de l'élément est déterminée d'après son contenu.

  Cette valeur n'est pas encore bien reconnue par tous les navigateurs (2020).

• flex-basis: 200px;

  Une valeur numérique, positive ou nulle, avec une unité de dimension (voir unités de dimensions en CSS).

  Si la valeur est exprimée en pourcentage, celui-ci est calculé par rapport à la largeur du container flex.

• flex-basis: inherit | initial | unset;

  Reportez-vous à la description générale de ces valeurs.

Simulateur.

La largeur des blocs dans le flex-box (propriété Object) n'a pas été définie : c'est donc le contenu qui détermine la largeur des éléments lorsque flex-basis a la valeur auto.

Object et Object ont été fixés à 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.

Voir aussi...

Flex-box - Propriétés.

• align-content : Disposition des lignes dans un flex-box ou une grille.
• align-items : Disposition verticale des éléments dans un flex-box ou une grille.
• align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
• display : Type de l'élément et la façon de l'afficher.
• 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 : Echaî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.
• justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
• order : Ordre des éléments dans un flex-box.