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 valeursauto
etcontent
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.
-
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.
flex-basis
:
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.