web-dev-qa-db-fra.com

Comment casser une ligne dans une mise en page flexible?

J'ai mes premier, deuxième et troisième éléments, puis je veux que le quatrième élément passe à la ligne suivante, quelle que soit la largeur de l'espace.

.box {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-start;
}
.it {
  max-width: 420px;
}
<div class="box">
  <div class="it">1</div>
  <div class="it">2</div>
  <div class="it">3</div>
  <div class="it">4</div>
</div>
htmlcssflexbox
28
kptlronyttcna

Vous pouvez insérer un pseudo-élément large à la bonne position:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-container::after {
  content: '';
  width: 100%;
}
.flex-item:last-child { /* or `:nth-child(n + 4)` */
  order: 1;
}
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
</div>
37
Oriol