CSS - Propriété max-inline-size : Guide du débutant

Bonjour à tous, futurs magiciens du CSS ! Aujourd'hui, nous allons plonger dans l'univers passionnant de la propriété max-inline-size. Ne vous inquiétez pas si vous êtes nouveaux ; je serai votre guide amical à travers cette aventure CSS. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et c'est parti !

Qu'est-ce que max-inline-size ?

Avant de rentrer dans les détails, comprenstons ce qu'est max-inline-size. Imaginez que vous essayez de faire rentrer un mot très long dans une petite boîte. C'est un peu ce que max-inline-size nous aide à faire en CSS. Il définit la taille maximale d'un élément dans la direction inline.

"Attendez," vous pourriez demander, "qu'est-ce que la direction inline ?" Excellent pregunta ! En anglais et dans de nombreuses autres langues, la direction inline est horizontale - de gauche à droite. Cependant, dans certaines langues comme l'arabe ou l'hébreu, c'est de droite à gauche. Et dans les modes d'écriture verticale, elle peut même être de haut en bas !

Valeurs possibles

Voyons maintenant les différentes valeurs que nous pouvons utiliser avec max-inline-size. Voici un tableau pratique pour vous :

Valeur	Description
<longueur>	Une longueur fixe comme 300px ou 20em
<pourcentage>	Un pourcentage de la taille du bloc conteneur
none	Aucune limite sur la taille (c'est la valeur par défaut)
max-content	La taille intrinsèque préférée
min-content	La taille intrinsèque minimale
fit-content	Utilise l'espace disponible, mais jamais moins que min-content et jamais plus que max-content

Ne vous inquiétez pas si certains de ces valeurs vous semblent confuses maintenant. Nous les explorerons chacune avec des exemples !

Application

La propriété max-inline-size s'applique à tous les éléments sauf :

• Les éléments inline non remplacés
• Les lignes de tableau
• Les groupes de lignes

Syntaxe

La syntaxe de base pour max-inline-size est assez simple :

max-inline-size: valeur;

Facile, non ? Maintenant, plongons dans quelques exemples spécifiques !

CSS max-inline-size - Valeur

Commençons avec un exemple simple en utilisant une longueur fixe :

.box {
max-inline-size: 300px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
Cette boîte a une max-inline-size définie à 300px. Le contenu se déroulera si cela dépasse cette largeur.
</div>

Dans cet exemple, nous avons défini la max-inline-size à 300 pixels. Cela signifie que peu importe la quantité de contenu que nous mettons à l'intérieur de la .box, elle ne s'étendra jamais au-delà de 300px dans la direction inline (qui est horizontale dans ce cas). Si le contenu est trop long, il se déroulera sur la ligne suivante.

CSS max-inline-size - Valeur

Maintenant, essayons une valeur en pourcentage :

.container {
width: 500px;
border: 2px solid black;
}

.box {
max-inline-size: 50%;
background-color: lightgreen;
padding: 10px;
}

<div class="container">
<div class="box">
Cette boîte a une max-inline-size définie à 50% de la largeur de son conteneur.
</div>
</div>

Dans ce cas, la .box aura une taille maximale inline de 50% de la largeur de son conteneur. Donc, si le conteneur fait 500px de large, la boîte ne dépassera jamais 250px de largeur.

CSS max-inline-size - Valeur

La valeur max-content est particulièrement intéressante. Elle définit la taille maximale inline à la taille préférée du contenu. Voyons cela en action :

.box {
max-inline-size: max-content;
background-color: lightyellow;
padding: 10px;
}

<div class="box">
Cette boîte s'étendra pour s'adapter à son contenu, mais ne se déroulera pas sauf si forcé.
</div>

Avec max-content, la boîte s'étendra pour s'adapter à tout son contenu sur une ligne, alleen si elle est forcée à le faire (comme si elle atteint le bord de la fenêtre).

CSS max-inline-size - Avec du texte vertical

Maintenant, quelque chose de différent ! Voyons comment max-inline-size fonctionne avec du texte vertical :

.vertical-box {
writing-mode: vertical-rl;
max-inline-size: 100px;
background-color: lightpink;
padding: 10px;
}

<div class="vertical-box">
Ce texte est vertical, et max-inline-size limite sa hauteur !
</div>

Dans cet exemple, nous avons utilisé writing-mode: vertical-rl pour rendre le texte vertical et de droite à gauche. Maintenant, max-inline-size limite réellement la hauteur de la boîte, car dans le mode d'écriture vertical, la direction inline est verticale !

Conclusion

Et voilà, les amis ! Nous avons exploré la propriété max-inline-size de haut en bas (ou devrais-je dire, de l'inline start à l'inline end ?). Souvenez-vous, le CSS est tout au sujet de l'expérimentation. N'ayez pas peur de jouer avec ces propriétés et de voir ce qui se passe. C'est ainsi que nous avons tous appris !

Avant de vous laisser, voici une petite blague pour retenir max-inline-size : Pourquoi la propriété CSS est-elle allée à la salle de sport ? Pour travailler sur sa max-inline-size, bien sûr !

Bonne programmation, et puissent vos layouts toujours être flexibles et votre contenu toujours s'ajuster parfaitement !

Credits: Image by storyset