Propriété CSS flex-wrap

La propriété flex-wrap définit si les éléments flexibles doivent enrouler ou non. Autrement dit, elle définit si les éléments sont disposés sur une seule ligne ou s'ils peuvent être affichés sur plusieurs lignes.

S'il n'y a aucun élément flexible, la propriété flex-wrap n'aura aucun effet.

Valeur initiale nowrap
Appliquée à Conteneurs flex.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.flexWrap = "wrap-reverse";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      .example {
      width: 200px;
      height: 200px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; 
      -webkit-flex-wrap: nowrap; 
      display: flex;
      flex-wrap: nowrap;
      }
      .example div {
      width: 50px;
      height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété flex-wrap</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #ccc;">C</div>
      <div style="background-color: #666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Dans cet exemple, les éléments flexibles enroulent dans le sens inverse.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      .example {
      width: 200px;
      height: 200px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; 
      -webkit-flex-wrap: wrap-reverse; 
      display: flex;
      flex-wrap: wrap-reverse;
      }
      .example div {
      width: 50px;
      height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété flex-wrap</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #ccc;">C</div>
      <div style="background-color: #666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Valeurs

Valeur Description
nowrap Définit que les éléments flexibles ne seront pas enroulés. C'est la valeur initiale de cette propriété.
wrap Définit que les éléments flexibles enrouleront si nécessaire.
wrap-reverse Définit que les éléments flexibles seront enroulés dans le sens inverse si nécessaire.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

29.0+
21-28 -webkit-
28.0+ 9.0+
6.1-8.0 -webkit-
12.1+


Trouvez-vous cela utile?

Articles Associées