La propriétémin-inline-size définit la taille minimale horizontale ou verticale d'un élément en ligne (inline) selon le mode d'écriture utilisé. Cette propriété « logique » correspond à la propriétémin-width oumin-height selon la valeur utilisée pourwriting-mode.

Exemple interactif

min-inline-size: 200px;writing-mode: horizontal-tb;

min-inline-size: 200px;writing-mode: vertical-rl;

min-inline-size: 20px;writing-mode: horizontal-tb;

min-inline-size: 75%;writing-mode: vertical-lr;

<section>  <div>Change min-inline-size</div></section>

#example-element {  display: flex;  flex-direction: column;  background-color: #5b6dcd;  height: 80%;  justify-content: center;  color: #ffffff;}

Si le mode d'écriture est orienté verticalement,min-inline-size fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriétémin-block-size peut être utilisée pour les blocs.

Syntaxe

/* Valeurs de longueur *//* Type <length>       */min-inline-size: 100px;min-inline-size: 5em;/* Valeurs proportionnelles à la *//* largeur du bloc englobant     *//* Type <percentage>             */min-inline-size: 10%;/* Valeurs avec un mot-clé */min-inline-size: max-content;min-inline-size: min-content;min-inline-size: fit-content;min-inline-size: fill-available;/* Valeurs globales */min-inline-size: inherit;min-inline-size: initial;min-inline-size: unset;

Valeurs

La propriétémin-inline-size peut prendre les mêmes valeurs que les propriétésmin-width oumin-height.

Définition formelle

Syntaxe formelle

min-inline-size =
<'min-width'>

<min-width> =
auto|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>|
stretch|
fit-content|
contain

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

CSS

.exemple {  writing-mode: vertical-rl;  background-color: yellow;  block-size: 5%;  min-inline-size: 200px;}

HTML

<p>Texte d'exemple</p>

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés physiques correspondantes

  • min-width
  • min-height
• writing-mode