oujood.com

Aligner les éléments à l'interieur d'un conteneur

La propriété css justify-content spécifie l'alignement entre les éléments à l'intérieur d'un conteneur flexible lorsque les éléments n'utilisent pas tout l'espace disponible.

chercher |

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

La propriété justify-content aligne les éléments du conteneur flexible lorsque les éléments n'utilisent pas tout l'espace disponible sur l'axe principal (horizontalement).

Astuce : utilisez la propriété align-items pour aligner les éléments verticalement.
Syntaxe CSS

justify-content: flex-start|flex-end|center|space-between
|space-around|space-evenly|initial|inherit;
Valeurs par défaut flex-start
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.justifyContent="space-between"

Prise en charge de la propriété css justify-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 ChromeInternet ExplorerFirefoxSafariOpera
Verssion29
21 -webkit-
1128
18 -moz-
9
6.1 -webkit-
7
17

      Copier le code

<!DOCTYPE html>
<html >
<head>
<title>justify-content:center</title>
<style> 
#conteneur {
  width: 400px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
  justify-content: center;
}

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

<h1>La propriété justify-content</h1>

<div id="conteneur">
  <div style="background-color:coral;">1</div>
  <div style="background-color:lightblue;">2</div>
  <div style="background-color:pink;">3</div>
</div>
</body>
</html>

Valeurs de la propriété css justify-content

Valeur Description
Stretch Par défaut. Les éléments sont étirés pour s'adapter au conteneur
center Les éléments sont positionnés au centre du conteneur
flex-start Les éléments sont positionnés au début du conteneur
flex-end Les éléments sont positionnés à la fin du conteneur
baseline Les éléments sont positionnés à la ligne de base du conteneur.
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite de cette propriété de son élément parent. Lire à propos de inherit

Il existe plusieurs options d'alignement disponibles, chacune ayant une utilisation spécifique.

L'option "flex-start" aligne les éléments à gauche du conteneur. Cette option est utile lorsque vous voulez que les éléments soient alignés à gauche par défaut, mais que vous voulez également donner la possibilité de les aligner à droite.

      Copier le code

.conteneur {
    display: flex;
    justify-content: flex-start;
}

L'option "center" aligne les éléments au centre du conteneur. Cette option est utile lorsque vous voulez que les éléments soient centralisés par défaut, mais que vous voulez également donner la possibilité de les aligner à gauche ou à droite.

      Copier le code

.conteneur {
    display: flex;
    justify-content: center;
}

L'option "flex-end" aligne les éléments à droite du conteneur. Cette option est utile lorsque vous voulez que les éléments soient alignés à droite par défaut, mais que vous voulez également donner la possibilité de les aligner à gauche.

      Copier le code

.conteneur {
    display: flex;
    justify-content: flex-end;
}

L'option "space-between" distribue les éléments également entre les bords gauche et droit du conteneur. Cette option est utile lorsque vous voulez que les éléments soient espacés de manière égale, mais que vous voulez également donner la possibilité de les aligner à gauche, au centre ou à droite.

      Copier le code

.conteneur {
    display: flex;
    justify-content: space-between;
}

L'option "space-around" distribue les éléments également autour du conteneur. Cette option est utile lorsque vous voulez que les éléments soient espacés de manière égale, mais que vous voulez également donner la possibilité de les aligner à gauche, au centre ou à droite.

      Copier le code

.conteneur {
    display: flex;
    justify-content: space-around;
}

En résumé, la propriété CSS justify-content vous permet de définir l'alignement horizontal de vos éléments dans un conteneur. Il existe plusieurs options d'alignement disponibles, chacune ayant une utilisation spécifique. Il est important de choisir l'option qui convient le mieux à votre projet pour obtenir le résultat souhaité.


Voir aussi nos tutoriel :

PHP Les boucles for foreach

PHP Les boucles for foreach

Détermine si une variable est de type chaîne de caractères">is_string

 Détermine si une variable est de type chaîne de caractères

XPATH operateurs et fonction

XPATH operateurs et fonction