<content-distribution>

Syntaxe

<content-distribution> = space-between | space-around | space-evenly | stretch

Valeurs

Les mots-clés suivants sont représentés par le terme de grammaire <content-distribution> :

space-between

Répartit uniformément les sujets d'alignement dans le conteneur d'alignement. Le premier élément est placé contre le bord de début du conteneur, le dernier élément contre le bord de fin, et les éléments restants sont répartis de façon à ce que l'espacement entre chaque paire d'éléments adjacents soit identique. L'alignement de repli par défaut pour space-between est safe flex-start pour le modèle flex, et start sinon. S'il n'y a qu'un seul élément, il sera collé au bord de début.

space-around

Les éléments sont répartis uniformément dans le conteneur, avec un espace de demi-taille aux extrémités. L'espacement entre chaque paire d'éléments adjacents est identique, et l'espacement avant le premier et après le dernier élément est égal à la moitié des autres espacements. L'alignement de repli par défaut pour space-around est safe center. Si le conteneur n'a qu'un seul enfant, l'élément sera centré.

space-evenly

Les éléments sont répartis uniformément dans le conteneur, avec un espace de taille complète aux extrémités. L'espacement entre chaque paire d'éléments adjacents, avant le premier élément et après le dernier, est identique. L'alignement de repli par défaut pour space-evenly est safe center. Si le conteneur n'a qu'un seul enfant, l'élément sera centré.

stretch

Si la taille combinée des éléments est inférieure à celle du conteneur, tous les éléments pouvant grandir verront leur taille augmenter de façon égale (et non proportionnelle), tout en respectant les contraintes imposées par max-height, max-width ou une fonctionnalité équivalente, de sorte que la taille totale des éléments remplisse exactement le conteneur. L'alignement de repli par défaut pour stretch est flex-start en flexbox, et start dans les autres modes de mise en page. S'il n'y a qu'un seul élément, et qu'il peut grandir, il occupera tout l'espace du conteneur.

Spécifications

Voir aussi

• Propriétés utilisant ce type de donnée : align-content, justify-content, place-content
• Autres types de données d'alignement de boîte : <baseline-position>, <content-position>, <overflow-position> et <self-position>
• Le module d'Alignement des boîtes CSS
• Le module Flexbox CSS
• Le module de Grille CSS