oujood.com

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.

chercher |

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.

ExplorateurGoogle Chrome Internet Explorer Firefox SafariOpera
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>





Voir aussi nos tutoriel :

cours sur js

Introduction au Javascript : Le Javascript est le language scripteur du Web. Quelques millions de pages Web utilisent le js pour ajouter des fonctionnalités, valider des données, détecte des navigateurs, et beaucoup plus

Balise code

Définit un morceau de code informatique

fonction convert_cyr_string, convert_cyr_string

Convertit une chaîne d'un jeu de caractères cyrillique l'autre