Min-content - Valeur CSS

La valeur min-content.

La valeur min-content est la plus petite largeur que peut prendre un texte, en ayant inséré des retours à la ligne partout où cela est possible. Très souvent min-content se résout à la longueur du mot le plus long.

Le calcul de min-content se fait en fonction de la direction d'écriture définie par writing-mode. Pour les langues latines, le calcul correspond donc à une largeur, mais pour les langues qui s'écrivent verticalement, le calcul correspond à une hauteur.

Voir aussi les valeurs max-content et fit-content qui ont une utilité comparable.

Exemples avec la valeur [min-content}.

Les exemples ci-dessous montrent l'effet de la valeur min-content appliquée à la largeur des éléments avec la propriété width. La propriété height n'est pas définie. Sa valeur initiale étant auto, la hauteur est calculée en fonction du contenu.
Le texte est une citation de Serge Gainsbourg.

Simple texte.

Dans ce premier exemple, la largeur est déterminée par le mot le plus long, en l'occurrence le mot supérieur.

Influence des tirets de césure.

Dans ce deuxième exemple, des tirets de césure ont été inséré dans le texte avec l'entité ­. Le navigateur dispose donc de plus de possibilités de césure. En conséquence, la largeur est plus petite que celle de l'exemple précédent.

Remarque : les tirets de césure automatique (hyphens:auto) ne sont pas générés.

Influence des blancs insécables.

Ici ce sont des blancs insécables qui ont été ajoutés entre les trois derniers mots (entité  ). Le navigateur ne peut donc pas couper la dernière ligne, et redispose les autres lignes en fonction de cette largeur.

Comportement des images.

Les images sont des éléments non sécables. Dans cet exemple, c'est l'image qui définit la largeur de l'élément calculé par min-content.

La laideur a ceci de supérieur à la beauté, c'est qu'elle dure.

Dimensionnement des largeurs de colonnes d'une grille.

La valeur min-content peut être utilisée avec grid-template-columns pour dimensionner les colonnes d'une grille. Dans ce cas, c'est les contenus de tous les éléments de la colonne qui sont pris en compte. Dans l'exemple ci-dessous min-content a été utilisée pour fixer aussi bien la largeur des colonnes que la largeur de la grille elle-même.

Largeur des éléments dans un flex-box.

La valeur min-content peut être utilisée avec la propriété flex-basis pour définir la largeur d'un élément dans un flex-box. Mais il faut garder à l'esprit que les propriétés flex-grow et flex-shrink peuvent permettre l'agrandissement ou le rétrécissement de cette dimension. Dans notre exemple ci-dessous, ces deux propriétés ont été fixées à 0.

Définition de la largeur d'un tableau.

La valeur min-content peut être utilisée pour définir la largeur d'un tableau. La largeur de toutes les colonnes est alors réduite au minimum. Mais il n'est pas possible d'utiliser min-content pour définir la largeur d'une colonne, différemment des autres colonnes.

La valeur min-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.
• grid-auto-columns : Définit la largeur par défaut des colonnes dans une grille.
• grid-auto-rows : Définit la hauteur par défaut des lignes dans une grille.
• grid-template-columns : Définit le nombre et la largeur des colonnes d'une grille.
• grid-template-rows : Définit le nombre et la hauteur des lignes d'une grille.
• 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.

Prise en charge par les navigateurs (compatibilité).

1

Valeur
min-content
utilisée avec
width

2

Valeur
min-content
utilisée avec
height

3

Valeur
min-content
utilisée avec
flex-basis

Estimation de la prise en charge globale.

95%

95%

93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Firefox

Opéra mini

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

Caniuse

Caniuse

Caniuse

Historique de la propriété min-content.

• Module CSS - Dimensionnement des blocs Niveau 3

  Première définition de la valeur min-content.
  

  27 Septembre 2012

  Document de travail.

  

  

  

Voir aussi, concernant le dimensionnement.

La valeur min-content et tout ce qui concerne le dimensionnement des éléments est décrit dans le module Module CSS - Dimensionnement des blocs. Vous y trouverez également la description des autres valeurs relatives au contenu.

Propriétés :

Fonctions :

Valeurs: