`Fit-content` - Valeur CSS

fit-content

Résumé des caractéristiques de la valeur `fit-content`

Description rapide

Calcule la dimension d'un élément en fonction de son contenu et de la place disponible.

Statut

Standard

Module W3C

Module CSS - Dimensionnement des blocs

Références (W3C)

CSS Box Sizing Module Level 3

Statut du document: WD (document de travail)

La valeur `fit-content`.

La valeur fit-content détermine une dimension optimale en considérant le contenu de l'élément et la place disponible. En gros, fit-content choisit la meilleure dimension entre auto, min-content et max-content. La formule exacte est :


	min(max-content, max(min-content, <place-disponible>))

Reportez-vous également aux explications concernant les valeurs max-content et min-content et la fonction fit-content(). Cette dernière effectue le même calcul que la valeur fit-content mais permet de paramétrer la place disponible.

La valeur `fit-content` peut être utilisée avec les propriétés suivantes :

block-size : Définit la dimension d'un l'élément suivant la direction des blocs. Pour les langues latines, cette propriété logique est équivalente à height.
flex-basis : Détermine la dimension par défaut d'un élément contenu dans un flex-box.
height : Définit la hauteur de l'élément.
inline-size : Définit la dimension de l'élément dans la direction des lignes. Pour les langues latines cette propriété est équivalente à width.
max-height : Définit une limite à la hauteur maximale de l'élément.
max-width : Définit la largeur maximale de l'élément.
min-height : Définit la hauteur minimale de l'élément.
min-width : Définit la largeur minimale de l'élément.
width : Définit la largeur de l'élément.

Exemples avec la valeur [`fit-content`}.

Utilisation de `fit-content` pour définir la largeur d'un élément.

Les trois blocs ci-dessous ont leur largeur définie sur fit-content. On voit que leur largeur est ajustée au contenu, mais sans dépasser la place disponible, ici la largeur de la page.

Grâce à internet, vous pouvez savoir si il pleut.

Grâce à internet, vous pouvez savoir si il pleut sans même avoir besoin de regarder dehors.

Grâce à internet, vous pouvez savoir si il pleut sans même avoir besoin de regarder dehors, et même si vous n'avez pas l'intention de sortir.

Utilisation de `fit-content` pour définir la largeur des colonnes d'une grille.

La valeur fit-content ne peut pas être utilisée pour dimensionner les colonnes dans une grille. Par contre, la fonction fit-content() peut l'être, sans doute à cause du fait que la fonction permet de définir une valeur maximale.

CSS : Cascading Style Sheets.

Langage déclaratif utilisé pour les mises en page et les mises en forme.

HTML : HyperText Markup Language.

Langage à balises.

XML : Extensible Markup Language.

Format d'échange de données.

Utilisation de `fit-content` pour définir la largeur des éléments dans un flex-box.

Tous les éléments du flex-box ci-dessous ont une largeur définie par fit-content. Par ailleurs, les propriétés flex-grow et flex-shrink ont été fixées à 0. On constate que fit-content se comporte comme max-content, c'est à dire que les éléments sont dimensionnés en fonction de leur contenu, sans ajouter de retours à la ligne, et sans prendre en compte la largeur disponible.

Texte court

Texte déjà un peu plus long

Le contenu de ce troisième élément est vraiment beaucoup plus long

Utilisation de `fit-content` dans un tableau.

La valeur fit-content n'est pas efficace pour définir les dimensions d'un tableau ou des cellules. Ces dernières sont déjà définies par quelque chose qui ressemble à fit-content.

Prise en charge par les navigateurs (compatibilité).

Colonne 1

Support de la valeur fit-content pour dimensionner la largeur d'un élément quelconque avec des propriétés comme width, grid-template-columns, etc.

Colonne 2

Support de la valeur fit-content pour dimensionner la hauteur d'un élément quelconque avec des propriétés comme height, grid-template-rows, etc.

Colonne 3

Support par les navigateurs de la fonction fit-content() pour dimensionner les éléments d'un flex-box.

Valeur
fit-content
utilisée avec
width

Valeur
fit-content
utilisée avec
height

Valeur
fit-content
utilisée avec
flex-basis

Estimation de la prise en charge globale.

95%

93%