Attribut min-inline-size CSS

Page précédente min-block-size
Page suivante min-height

Définition et utilisation

min-inline-size La propriété spécifie la taille minimale de l'élément dans la direction horizontale.

Si la taille du contenu dans la direction en ligne est inférieure à la taille minimale, alors l'application min-inline-size valeur de l'attribut.

Si la taille du contenu dans la direction en ligne est supérieure à la taille minimale, alors min-inline-size La valeur de l'attribut ne fonctionne pas.

Note :les attributs CSS associés writing-mode Définit la direction en ligne, ce qui affecte min-inline-size les résultats des attributs CSS. Pour les pages en anglais, la direction de bloc est vers le bas et la direction en ligne est de gauche à droite.

CSS min-inline-size les attributs sont similaires aux attributs CSS min-height et min-width Très similaire, mais min-inline-size L'attribut dépend de la direction en ligne.

Instance

Exemple

Exemple 1

div {
  min-inline-size: 200px;
}

Essayez-le vous-même

Exemple 2 : Mode d'écriture

Définissez la direction en ligne minimale de l'élément <div> à 200 pixels : writing-mode Lorsque la propriété writing-mode est définie sur vertical-rl, la direction d'alignement en ligne change de latérale à descendante, ce qui affecte le fonctionnement de la propriété min-inline-size :

div {
  min-inline-size: 260px;
  writing-mode: vertical-rl;
}

Essayez-le vous-même

Exemple 3 : min-inline-size et inline-size

Regardez un inline-size Pour le <div> élément de 200px et un autre min-inline-size Différents comportements du <div> élément de 200px lors de la modification de la taille du contenu :

#div1 {
  min-inline-size: 200px;
}
#div2 {
  inline-size: 200px;
}

Essayez-le vous-même

Syntaxe CSS

min-inline-size: auto|length|initial|inherit;

Valeur de l'attribut

Valeur	Description
auto	Par défaut. La valeur par défaut de min-inline-size de l'élément.
length	Spécifiez la taille minimale avec une unité fixe (comme px, pt, cm, etc.). Voir :Unités CSS.
%	Spécifiez la taille minimale en pourcentage par rapport à la taille de l'élément parent sur l'axe correspondant.
initial	Réinitialise cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut :	auto
Héritabilité :	Non
Réalisation de l'animation :	Supporté. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.minInlineSize="10px"