Propriété max-inline-size de CSS
- Page précédente max-height
- Page suivante max-width
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; }
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; }
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; }
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
- Page précédente max-height
- Page suivante max-width