OUJOOD.COM
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
<!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>