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
-------


```css
/\* 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`.


```html
<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.


```css
.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 |
| CSS Box Sizing Module Level 4 # sizing-values |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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`