Propriété flex-wrap

La propriété flex-wrap définit la disposition multiligne des blocs le long de l'axe principal. Elle s'applique à l'élément parent des blocs flex. Elle fait partie de la propriété raccourcie flex-flow.

Syntaxe

csssélecteur {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Valeurs

Valeur par défaut : nowrap.

Exemple . Valeur wrap

Maintenant, les blocs ne tiennent pas dans leur conteneur et s'aligneront sur plusieurs lignes :

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Exemple . Valeur wrap-reverse

Et maintenant, l'ordre de succession change à l'inverse (regardez les chiffres à l'intérieur des blocs) :

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Exemple . Valeur nowrap

Maintenant, les blocs seront disposés en mode monoligne (comme par défaut). Dans ce cas, la valeur de largeur width pour les blocs sera ignorée, si elle empêche les blocs de tenir dans le parent. Veuillez noter que les blocs tiennent dans le parent, mais leur largeur réelle n'est pas de 100px, comme défini, mais moins :

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Exemple . Valeur nowrap

Cependant, si les blocs tiennent avec la largeur qui leur est attribuée - alors la propriété width ne sera pas ignorée. Réduisons le nombre de blocs afin qu'ils tiennent tous :

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid #696989;
  height: 200px;
  width: 330px;
  margin: auto;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Voir aussi