max-block-size
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
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.
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'>
<max-width> =
none |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
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 |
CSS Box Sizing Module Level 4 # sizing-values |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Les propriétés physiques correspondantes :
- La propriété logique correspondant à l'axe en ligne :
max-inline-size
writing-mode