W3Docs

Apparence

Français

Propriété CSS justify-content ​

La propriété justify-content aligne les éléments lorsque ceux-ci n’utilisent pas tout l’espace disponible le long de l’axe principal. Elle contrôle l’alignement des éléments qui débordent de la ligne. Cette propriété est une sous-propriété du module Flexible Box Layout.

La propriété justify-content est l’une des propriétés CSS3.

INFO

La propriété justify-content doit être utilisée avec la propriété display définie sur "flex". Pour aligner les éléments verticalement, utilisez la propriété align-items.

Initial Valueflex-start
Applies toFlex containers.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.justifyContent = "center";

Syntaxe ​

Syntaxe CSS de justify-content

css
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit;

Exemple de la propriété justify-content : ​

Exemple de code CSS justify-content

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .center {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: flex;
        justify-content: center;
      }
      .center div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: center" is set:</p>
    <div class="center">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>
Try it Yourself »

Résultat ​

CSS justify-content flex-start

Exemple de la propriété justify-content avec la valeur "flex-start" : ​

Exemple CSS justify-content flex-start

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .start {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: flex;
        justify-content: flex-start;
      }
      .start div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: flex-start" is set:</p>
    <div class="start">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>
Try it Yourself »

Exemple de la propriété justify-content avec la valeur "flex-end" : ​

Exemple CSS justify-content flex-end

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .end {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: flex;
        justify-content: flex-end;
      }
      .end div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: flex-end" is set:</p>
    <div class="end">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>
Try it Yourself »

Exemple de la propriété justify-content avec la valeur "space-between" : ​

Exemple CSS justify-content space-between

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .space-between {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: flex;
        justify-content: space-between;
      }
      
      .space-between div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: space-between" is set:</p>
    <div class="space-between">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>
Try it Yourself »

Exemple de la propriété justify-content avec la valeur "space-around" : ​

Exemple CSS justify-content space-around

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      .space-around {
        width: 400px;
        height: 150px;
        border: 1px solid #666;
        display: flex;
        justify-content: space-around;
      }
      .space-around div {
        width: 70px;
        height: 70px;
        background-color: #ccc;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-content property example</h2>
    <p>Here the "justify-content: space-around" is used:</p>
    <div class="space-around">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>
Try it Yourself »

Valeurs ​

ValueDescriptionPlay it
flex-startLes éléments commencent au début du conteneur.Play it »
flex-endLes éléments sont placés à la fin du conteneur.Play it »
centerLes éléments sont placés au centre du conteneur.Play it »
space-aroundIl y a de l’espace avant, entre et après les éléments.Play it »
space-betweenIl y a de l’espace entre les éléments.Play it »
space-evenlyL’espace est égal avant, entre et après les éléments.Play it »
initialFait utiliser à la propriété sa valeur par défaut.Play it »
inheritHérite de la propriété de son élément parent.

Practice ​

What does the 'justify-content' property in CSS do?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.