W3docs
fr
Se connecter

Propriété CSS flex-wrap

The flex-wrap CSS property defines whether the items should wrap or not. See some examples with different values.

La propriété flex-wrap définit si les éléments flexibles doivent ou non se replier (wrap). En d'autres termes, elle définit si les éléments sont forcés sur une seule ligne ou s'ils peuvent s'écouler sur plusieurs lignes.

S'il n'y a pas d'éléments flexibles, la propriété flex-wrap n'aura aucun effet.

La propriété flex-wrap fait partie des propriétés CSS3.

Valeur initialenowrap
S'applique àConteneurs flex.
HéritéeNon.
AnimableNon.
VersionCSS3
Syntaxe DOMobject.style.flexWrap = "wrap-reverse";

Syntaxe

Syntaxe de la propriété CSS flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;

Exemple de la propriété flex-wrap avec la valeur "wrap" :

Exemple de la propriété CSS flex-wrap avec la valeur wrap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .wrap {
        width: 200px;
        height: 200px;
        border: 1px solid #cccccc;
        display: flex;
        flex-wrap: wrap;
      }
      .wrap div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>The flex-wrap Property</h2>
    <div class="wrap">
      <div style="background-color:coral;">A</div>
      <div style="background-color:lightblue;">B</div>
      <div style="background-color:khaki;">C</div>
      <div style="background-color:pink;">D</div>
      <div style="background-color:lightgrey;">E</div>
      <div style="background-color:lightgreen;">F</div>
    </div>
  </body>
</html>
Essayez vous-même »

Exemple de la propriété flex-wrap avec la valeur "nowrap" :

Exemple de la propriété CSS flex-wrap avec la valeur nowrap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-wrap: nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-wrap property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>
Essayez vous-même »

Résultat

CSS flex-wrap Property

Exemple de la propriété flex-wrap avec la valeur "wrap-reverse" :

Exemple de la propriété CSS flex-wrap avec la valeur wrap-reverse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-wrap: wrap-reverse;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-wrap property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>
Essayez vous-même »

Valeurs

ValeurDescriptionTester »
nowrapDéfinit que les éléments flexibles ne se replieront pas. C'est la valeur par défaut de cette propriété.Tester »
wrapDéfinit que les éléments flexibles se replieront si nécessaire.Tester »
wrap-reverseDéfinit que les éléments flexibles se replieront dans l'ordre inverse si nécessaire.Tester »
initialFait utiliser à la propriété sa valeur par défaut.Tester »
inheritHérite la propriété de son élément parent.

Pratique

Pratique

Quel est l'objectif de la propriété 'flex-wrap' en CSS ?