La propriété css align-content

Algnement du contenu d'un élément : la propriété css align-content

La propriété css align-content aligne le contenu des lignes flexibles. Elle est utilisée pour spécifier l'alignement entre les lignes à l'intérieur d'un conteneur flexible.
Cette propriété définit la manière dont chaque ligne du conteneur est alignée à l'intérieur d'un conteneur flexible et n'est applicable que si flex-wrap : wrap est appliqué, c'est-à-dire si plusieurs lignes d'éléments du conteneur flexible sont présentes.

Définition et utilisation de la propriété css align-content

La propriété align-content modifie le comportement de la propriété flex-wrap. Elle est similaire à align-items, mais au lieu d'aligner les éléments flex, elle aligne les lignes flex.

Remarque : il doit y avoir plusieurs lignes d'éléments pour que cette propriété ait un quelconque effet !

Conseil : utilisez la propriété justify-content pour aligner les éléments sur l'axe principal (horizontalement).

Syntaxe css

align-content: stretch|center|flex-start|flex-end|space-between|
space-around|space-evenly|initial|inherit;

Valeur par défaut:	Stretch
Inherited: :	non
Animable: :	non. En savoir plus sur l'animable
Version: :	CSS3
Syntaxe JavaScript: :	object.style.alignContent="center"

Prise en charge de la propriété css align-content dans navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.

Explorateur
Verssion	21	11	28	9	7 21.1 -webkit-

Exemple 📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
 <title> propriété css align-content </title>
        <style>
            .main-conteneur {
                display: flex;
                height: 400px;
                flex-wrap: wrap;
                align-content: center;
                background-color: #003668;
            }
             .main-conteneur div{ border-radius:10px;}
            .main-conteneur div {
                background-color: #f4f4f4;
                width: 100px;
                margin: 10px;
                text-align: center;
                font-size: 50px;
            }
            h2 {
                text-align:center;
            }
            .main {
                font-size:40px;
                text-align:center;
                color:#003668;
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <div class = "main">www.oujood.com</div>
        <h2>align-content: center;</h2>
        <div class="main-conteneur">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
        </div>

</body>
</html>

Valeurs de la propriété css align-content

Valeur	Description
stretch	Valeur par défaut. Les lignes s'étirent pour occuper l'espace restant
center	Les lignes sont placées vers le centre du conteneur flexible.
flex-start	Les lignes sont placées vers le début du conteneur flexible.
flex-end	Les lignes sont placées vers la fin du conteneur flexible.
space-between	Les lignes sont réparties uniformément dans le conteneur flexible.
space-around	Les lignes sont réparties uniformément dans le conteneur flexible, avec des espaces demi-taille à chaque extrémité.
space-evenly	Les lignes sont réparties uniformément dans le conteneur flexible, avec un espace égal autour d'elles.
initial	Définit cette propriété à sa valeur par défaut.
inherit	Hérite cette propriété de son élément parent. .

Exemple : Changer align-content avec JavaScript

📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>changer align-content avec JavaScript</title>
 <style> 
#conteneur {
  width: 140px;
  height: 300px;
  border: 1px solid #000000;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around; 
}

#conteneur div {
  width: 70px;
  height: 70px;
}
</style>
</head>
<body>

<h1>Changer align-content avec JavaScript</h1>

<div id="conteneur">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:lightgrey;"></div>
  <div style="background-color:lightgreen;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  
</div>

<p>La valeur actuelle de la propriété css align-content est la valeur par défaut soit : Stretch. <br>
Cliquez sur le bouton "Changer" pour définir la valeur de la propriété alignContent sur "space-between".
</p>
<button onclick="maFonction()">Changer</button>

<script>
function maFonction() {
  document.getElementById("conteneur").style.alignContent = "space-between";
}
</script>

</body>
</html>

Liste des propriétés css