max-block-size

La propriété max-block-size définit la taille maximale 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é permet, contrairement à max-height et max-width, de définir une taille maximale qui tient compte de la direction d'écriture utilisée pour le texte du contenu.

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.

Exemple interactif

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(20em);

/* Valeurs globales */
max-block-size: inherit;
max-block-size: initial;
max-block-size: revert;
max-block-size: revert-layer;
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>: Définit la valeur de max-block-size avec une longueur absolue.
<percentage>: Définit la valeur max-block-size comme un pourcentage de la taille du bloc englobant sur l'axe de bloc.
none: Aucune limite n'est imposée à la taille de la boîte.
max-content: La valeur intrinsèque préférée de max-block-size.
min-content: La valeur intrinsèque minimale de max-block-size.
fit-content(<length-percentage>): Utilise la formule fit-content où l'espace disponible est remplacé par l'argument (correspond à min(max-content, max(min-content, argument))).

Relation avec les propriétés physiques

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

Valeur pour `writing-mode`	Propriété physique équivalente à `max-block-size`
`horizontal-tb`, `lr` Obsolète , `lr-tb` Obsolète , `rl` Obsolète , `rb` Obsolète , `rb-rl` Obsolète	`max-height`
`vertical-rl`, `vertical-lr`, `sideways-rl` Expérimental , `sideways-lr` Expérimental , `tb` Obsolète , `tb-rl` Obsolète	`max-width`

Note : Les valeurs sideways-lr et sideways-rl pour writing-mode ont été retirées du module de spécification CSS sur les modes d'écriture de niveau 3 en fin de processus et pourraient être réintroduites dans la spécification de niveau 4.

Note : Les modes d'écriture lr, lr-tb, rl, rb et rb-tl ne sont plus autorisés pour les contextes HTML et peuvent uniquement être utilisés dans des contextes SVG 1.x.

Définition formelle

Valeur initiale	`none`
Applicabilité	identique à `width` et à `height`
Héritée	non
Pourcentages	la taille de bloc du bloc englobant
Valeur calculée	identique à `max-width` et à `max-height`
Type d'animation	une longueur, pourcentage ou calc() ;

Syntaxe formelle

max-block-size = 
  <'max-width'>

Exemples

Définir `max-block-size` pour des textes horizontaux et verticaux

Dans cet exemple, on utilise le même texte (les phrases d'introduction de Moby Dick) en utilisant les modes d'écriture horizontal-tb et vertical-rl.

Excepté cette différence sur le mode d'écriture, les boîtes sont identiques, y compris pour les valeurs utilisées pour max-block-size.

HTML

Le fragment HTML se compose de deux blocs <div> dont le mode d'écriture sera défini avec la propriété writing-mode selon que la classe HTML utilisée vaut horizontal ou vertical. Les deux boîtes utilisent la classe standard-box, qui fournit la coloration, le remplissage et les valeurs pour max-block-size.

<p>Writing mode <code>horizontal-tb</code> (the default):</p>
<div class="standard-box horizontal">
  Call me Ishmael. Some years ago—never mind how long precisely—having little or
  no money in my purse, and nothing particular to interest me on shore, I
  thought I would sail about a little and see the watery part of the world. It
  is a way I have of driving off the spleen and regulating the circulation.
</div>

<p>Writing mode <code>vertical-rl</code>:</p>
<div class="standard-box vertical">
  Call me Ishmael. Some years ago—never mind how long precisely—having little or
  no money in my purse, and nothing particular to interest me on shore, I
  thought I would sail about a little and see the watery part of the world. It
  is a way I have of driving off the spleen and regulating the circulation.
</div>

CSS

Le CSS définit trois classes. D'abord standard-box, qui est appliquée aux deux boîtes. Celle-ci fournit la mise en forme de base avec les tailles de bloc minimales et maximales, la taille de la police et ainsi de suite.

On a ensuite les classes horizontal et vertical, qui ajoutent la propriété writing-mode à la boîte avec la valeur horizontal-tb ou vertical-rl selon la classe utilisée.

.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: #000;
  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
  max-block-size: 160px;
  min-block-size: 100px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}

Résultat

Spécifications

Specification
CSS Logical Properties and Values Level 1 # propdef-max-block-size

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

Les propriétés physiques correspondantes :
- max-width
- max-height
La propriété logique correspondant à l'axe en ligne : max-inline-size
writing-mode