1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
---
title: max-block-size
slug: Web/CSS/max-block-size
tags:
- CSS
- Experimental
- Propriété
- Reference
translation_of: Web/CSS/max-block-size
---
{{CSSRef}}{{SeeCompatTable}}
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 {{cssxref("writing-mode")}}. Elle correspond à la propriété {{cssxref("max-width")}} ou {{cssxref("max-height")}} selon la valeur utilisée pour {{cssxref("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é {{cssxref("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](/fr/docs/Web/CSS/writing-mode#Exemple) pour en savoir plus.
{{EmbedInteractiveExample("pages/css/max-block-size.html")}}
## 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;
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 {{cssxref("max-width")}} ou {{cssxref("max-height")}}.
{{page("/fr/docs/Web/CSS/max-width", "Valeurs")}}
### 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` {{deprecated_inline}}, `lr-tb` {{deprecated_inline}}, `rl` {{deprecated_inline}}, `rb` {{deprecated_inline}}, `rb-rl` {{deprecated_inline}} | {{cssxref("max-height")}} |
| `vertical-rl`, `vertical-lr`, `sideways-rl` {{experimental_inline}}, `sideways-lr` {{experimental_inline}}, `tb` {{deprecated_inline}}, `tb-rl` {{deprecated_inline}} | {{cssxref("max-width")}} |
> **Note :** Les valeurs `sideways-lr` et `sideways-rl` pour `writing-mode` ont été retirées de la spécification CSS Writing Modes Level 3 en fin de processus et pourraient être réintroduites dans la spécification Level 4.
> **Note :** Les modes d'écriture `lr`, `lr-tb`, `rl`, `rb` et `rb-tl` ne sont plus autorisés pour les contextes {{Glossary("HTML")}} et peuvent uniquement être utilisés dans des contextes {{Glossary("SVG")}} 1.x.
### Syntaxe formelle
{{csssyntax}}
## Exemple
### CSS
```css
.exemple {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 100%;
max-block-size: 200px;
}
```
### HTML
```html
<p class="exemple">Texte d'exemple</p>
```
### Résultat
{{EmbedLiveSample("Exemple")}}
## Spécifications
| Spécifications | État | Commentaires |
| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
| {{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale |
{{cssinfo}}
## Compatibilité des navigateurs
{{Compat("css.properties.max-block-size")}}
## Voir aussi
- Les propriétés physiques correspondantes : {{cssxref("max-width")}} et {{cssxref("max-height")}}
- {{cssxref("writing-mode")}}
|