Propriété min-block-size de CSS

Page précédente @media
Page suivante min-inline-size

Définition et utilisation

min-block-size La propriété spécifie la taille minimale de l'élément dans la direction du bloc.

Si la taille du contenu dans la direction du bloc est inférieure à la taille minimale, alors l'application min-block-size valeur de l'attribut.

Si la taille du contenu dans la direction du bloc est supérieure à la taille minimale, alors min-block-size La valeur de l'attribut ne fonctionne pas.

Remarque :les attributs CSS associés writing-mode Définit la direction du bloc, ce qui affecte min-block-size résultat des attributs. Pour les pages en anglais, la direction du bloc est descendante et la direction en ligne est de gauche à droite.

CSS min-block-size les attributs sont similaires aux attributs CSS min-height et min-width Très similaire, mais min-block-size L'attribut dépend de la direction du bloc.

Exemple

Exemple 1

Définir la taille minimale en bloc de l'élément <div> à 200 pixels :

div {
  min-block-size: 200px;
}

Essayez-le vous-même

Exemple 2 : Mode d'écriture

Définir la taille minimale en bloc de l'élément <div> à 200 pixels : writing-mode Lorsque l'attribut valeur est vertical-rl, la direction du bloc change de descendante à latérale, ce qui affecte min-block-size Fonctionnement de l'attribut :

div {
  min-block-size: 200px;
  writing-mode: vertical-rl;
}

Essayez-le vous-même

Exemple 3 : min-block-size et block-size

Observons un élément <div> (block-size à 100px) et un autre élément <div> (min-block-size différentes réactions face à la variation de la taille du contenu (à 100px) :

#div1 {
  min-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

Essayez-le vous-même

Syntaxe CSS

min-block-size: auto|length|initial|inherit;

Valeur de l'attribut

Valeur	Description
auto	Par défaut. Valeur par défaut min-block-size de l'élément.
length	Définir min-block-size, en unités comme px, pt, cm, etc. Voir :Unités CSS.
%	Définir min-block-size en pourcentage de la taille de l'axe correspondant par rapport à l'élément parent.
initial	Réinitialise cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut :	auto
Héritabilité :	Non
Création d'animation :	Supporté. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.minBlockSize="10px"