max-block-size

La propriété max-block-size définit la taille maximale horizontale ou verticale d'un élément selon l'axe perpendiculaire (l'axe de bloc) au sens d'écriture indiqué par writing-mode. Elle correspond à la propriété max-width ou max-height selon la valeur utilisée pour writing-mode. Si le mode d'écriture est orienté verticalement, max-block-size fait référence à la hauteur maximale de l'élément, sinon elle fait référence à la largeur maximale de l'élément.

La propriété max-inline-size peut être utilisée pour l'effet analogue selon l'axe en ligne (c'est-à-dire l'axe qui suit le sens d'écriture).

Cette propriété est une propriété logique qui doit remplacer les propriétés physiques correspondantes (max-height ou max-width) si on souhaite que la disposition tienne compte du mode d'écriture de la page (que celui-ci soit horizontal ou vertical). Vous pouvez consulter ces exemples pour en savoir plus.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

Syntaxe

/* Valeurs de longueur */
/* Type <length>       */
max-block-size: 300px;
max-block-size: 25em;

/* Valeurs proportionnelles */
/* Type <percentage> */
max-block-size: 75%;

/* Valeurs avec un mot-clé */
max-block-size: none;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content;
max-block-size: fill-available;

/* Valeurs globales */
max-block-size: inherit;
max-block-size: initial;
max-block-size: unset;

Valeurs

La propriété max-block-size peut prendre les mêmes valeurs que les propriétés max-width ou max-height.

<length>

La largeur minimale fixée. Voir <length> pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.

<percentage>

La largeur minimale fixée, exprimée comme un fraction de la largeur du bloc englobant. Voir la page <percentage> sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.

fill-available

La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (padding). Certains navigateurs implémentent cette valeur avec un ancien nom : available.

fit-content

Un synonyme pour max-content.

max-content

La largeur intrinsèque préférée.

min-content

La largeur intrinsèque minimale.

none

Il n'y a pas de maximum pour la largeur. C'est la valeur par défaut.

Relation avec les propriétés physiques

La valeur de writing-mode détermine la propriété physique correspondant à max-block-size :

Syntaxe formelle

<'max-width'>

Exemple

CSS

.exemple {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 100%;
  max-block-size: 200px;
}

HTML

<p class="exemple">Texte d'exemple</p>

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés physiques correspondantes : max-width et max-height
• writing-mode