Propriété max-inline-size de CSS

Définition et utilisation

max-inline-size L'attribut spécifie la taille maximale de l'élément dans la direction inline.

Si la taille du contenu dans la direction inline est inférieure à la taille maximale, max-inline-size La valeur de l'attribut ne joue aucun rôle.

Si la taille du contenu dans la direction inline est supérieure à la taille maximale, l'attribut s'applique max-inline-size valeur de l'attribut.

Remarque :les attributs CSS associés writing-mode Définit la direction inline, ce qui affecte max-inline-size résultat de l'attribut. Pour les pages en anglais, la direction de bloc est descendante et la direction inline est de gauche à droite.

CSS max-inline-size l'attribut correspond à l'attribut CSS max-height et max-width Très similaire, mais max-inline-size L'attribut dépend de la direction inline.

Exemple

Exemple 1

Règle la taille maximale inline de l'élément <div> à 60 pixels :

div {
  max-inline-size: 60px;
}

Essayez-le vous-même

Exemple 2 : Mode d'écriture

Règle la taille maximale inline de l'élément <div> writing-mode Lorsque l'attribut est réglé sur vertical-rl, la direction inline change de latérale à descendante, ce qui affecte max-inline-size Fonctionnement de l'attribut :

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

Essayez-le vous-même

Exemple 3 : Max-inline-size vs Inline-size

Observons un élément <div> (inline-size 100px) et un autre élément <div> (max-inline-size différentes réactions face aux variations de la taille du contenu (100px) :

#div1 {
  max-inline-size: 100px;
}
#div2 {
  inline-size: 100px;
}

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur Description
auto Par défaut. La valeur par défaut de max-inline-size de l'élément.
length Utilisez des unités telles que px, pt, cm. Voir :Unités CSS
% Spécifiez un pourcentage de la taille de l'axe correspondant par rapport à l'élément parent.
initial Règle 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
Création d'animation : Prise en charge. Voir :Propriétés liées aux animations
Version : CSS3
Syntaxe JavaScript : object.style.maxInlineSize="60px"

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opéra
57.0 79.0 41.0 12.1 44.0

Pages connexes

Référence :propriété inline-size de CSS

Référence :Propriété min-inline-size de CSS

Référence :Propriété max-height de CSS

Référence :Propriété max-width de CSS

Référence :Attribut writing-mode CSS