Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in EnglishAlways switch to English

align-content

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriétéCSSalign-content permet de définir la répartition de l'espace entre et autour des éléments de contenu le long del'axe transversal d'unflexbox, ou de l'axe de bloc d'un élémentgrille oude niveau bloc.

Cette propriété n'a aucun effet sur les conteneurs flexibles à une seule ligne (c'est-à-dire ceux avecflex-wrap: nowrap).

L'exemple interactif ci-dessous utilise la mise en page en grille pour illustrer certaines des valeurs de cette propriété.

Exemple interactif

align-content: start;

align-content: center;

align-content: space-between;

align-content: space-around;

<section>  <div>    <div>      <div>Un</div>      <div>Deux</div>      <div>Trois</div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  grid-template-columns: 60px 60px;  grid-auto-rows: 40px;  column-gap: 10px;  height: 180px;}#example-element > div {  background-color: rgb(0 0 255 / 0.2);  border: 3px solid blue;}

Syntaxe

css

/* Alignement normal */align-content: normal;/* Alignement le long de l'axe *//* align-content ne prend pas en charge les valeurs left et right */align-content: center;align-content: start;align-content: end;align-content: flex-start;align-content: flex-end;/* Alignement sur la ligne de base */align-content: baseline;align-content: first baseline;align-content: last baseline;/* Répartition de l'espace */align-content: space-between;align-content: space-around;align-content: space-evenly;align-content: stretch;/* Gestion du dépassement */align-content: safe center;align-content: unsafe center;/* Valeurs globales */align-content: inherit;align-content: initial;align-content: revert;align-content: revert-layer;align-content: unset;

Valeurs

normal

Les éléments sont groupés sur leur position par défaut, comme sialign-content n'avait pas été défini.

start

Les éléments sont regroupés vers le bord au début de l'axe de bloc.

center

Les éléments sont regroupés au centre de l'axe de bloc.

end

Les éléments sont regroupés vers le bord à la fin de l'axe de bloc.

flex-start

Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme destart.

flex-end

Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme deend.

baseline,first baseline,last baseline

Définir la participation à l'alignement sur la première ou la dernière ligne de base : aligner la ligne de base d'alignement de la première ou de la dernière série de lignes de base de la boîte avec la ligne de base correspondante dans la série partagée (première ou dernière) de toutes les boîtes de son groupe de partage de ligne de base.

La ligne de base est la ligne sur laquelle reposent la plupart des lettres et en dessous de laquelle descendent les jambages.

L'alignement de secours pourfirst baseline eststart, celui pourlast baseline estend.

space-between

Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, le premier élément est aligné sur le bord au début du conteneur et le dernier élément est aligné sur le bord à la fin du conteneur.

space-around

Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, la moitié de cet espace est utilisée entre le premier élément et le bord au début du conteneur et la moitié de cet espace est utilisée entre le dernier élément et le bord à la fin du conteneur

space-evenly

Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, entre le premier élément et le bord du conteneur et entre le dernier élément et le bord du conteneur.

stretch

Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en bloc, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées parmax-height/max-width (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.

safe

Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Si l'élément dépasse du conteneur avec la valeur d'alignement indiquée, l'élément sera alors aligné avec la valeurstart.

unsafe

Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Quelle que soit la taille et le dépassement éventuellement occasionné, l'élément est aligné avec la valeur indiquée.

Note :Les valeurs<content-distribution> (space-between,space-around,space-evenly etstretch) n'ont aucun effet dans lamise en page de bloc car tout le contenu de ce bloc est traité comme un seulsujet d'alignement.

Définition formelle

Valeur initiale	`normal`
Applicabilité	Conteneurs de type bloc, conteneurs multi-colonnes et conteneurs flexibles
Héritée	non
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

align-content =
normal|
<baseline-position>|
<content-distribution>|
<overflow-position>?<content-position>

<baseline-position> =
[first|last]?&&
baseline

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

<overflow-position> =
unsafe|
safe

<content-position> =
center|
start|
end|
flex-start|
flex-end

<section>  <div>Olive</div>  <div>Corail</div>  <div>Bleu<br />ciel<br />profond</div>  <div>Orchidée</div>  <div>Ardoise bleue</div>  <div>Marron</div></section>

<fieldset>  <legend>Contrôles</legend>  <div>    <label for="display">display: </label>    <select>      <option value="block" selected>block</option>      <option value="flex">flex</option>      <option value="grid">grid</option>    </select>  </div>  <div>    <label for="alignContent">align-content: </label>    <select>      <option value="normal" selected>normal</option>      <option value="start">start</option>      <option value="center">center</option>      <option value="end">end</option>      <option value="flex-start">flex-start</option>      <option value="flex-end">flex-end</option>      <option value="space-between">space-between</option>      <option value="space-around">space-around</option>      <option value="space-evenly">space-evenly</option>    </select>  </div>  <p>CSS appliqué</p>  <pre>section {  display: <span>block</span>;  align-content: <span>normal</span>}  </pre></fieldset>

CSS

body {  font-size: 1.25rem;  display: flex;  gap: 1rem;}section div {  font-family: monospace;  padding: 3px;}

css

section {  border: solid 1.5px tomato;  height: 300px;  width: 300px;  flex-wrap: wrap; /* utilisé uniquement par flex */  gap: 0.2rem; /* non utilisé par block */}.olive {  background-color: olive;}.coral {  background-color: coral;}.deepskyblue {  background-color: deepskyblue;}.orchid {  background-color: orchid;}.slateblue {  background-color: slateblue;  color: white;}.maroon {  background-color: maroon;  color: white;}

const alignContent = document.querySelector("#alignContent");const display = document.querySelector("#display");const container = document.querySelector("section");const displayStyle = document.querySelector("#displayStyle");const alignStyle = document.querySelector("#align");alignContent.addEventListener("change", () => {  updatePage();});display.addEventListener("change", () => {  updatePage();});function updatePage() {  const alVal = alignContent.value;  const dVal = display.value;  container.style.alignContent = alVal;  container.style.display = dVal;  alignStyle.innerText = alVal;  displayStyle.innerText = dVal;}updatePage();

Résultat

Essayez de changer la valeur dedisplay et la valeur dealign-content.

Dans lamise en page de bloc, les éléments enfants sont traités comme un seul élément, ce qui signifie quespace-between,space-around etspace-evenly se comportent différemment.