Propriété CSS flex-wrap

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.