Comment saut de ligne dans un flex de mise en page?

J'ai mon premier, deuxième et troisième éléments et puis je veux la suite de l'élément d'aller à la ligne suivante, peu importe quelle est la largeur de l'espace.

CSS:

.box {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-start;
}
.it {
  max-width: 420px;
}

HTML:

<div class="box">
  <div class="it">1</div>
  <div class="it">2</div>
  <div class="it">3</div>
  <div class="it">4</div>
</div>

  • Veuillez ajouter le code.
InformationsquelleAutor kptlronyttcna | 2015-02-27
  1. 36

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

    CSS:

    .flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-container::after {
  content: '';
  width: 100%;
}
.flex-item:last-child { /* or `:nth-child(n + 4)` */
  order: 1;
}

    HTML:

    <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>

    • Merci il fonctionne presque. Le seul problème est que si il ya un 5ème élément, le 4ème élément va à la ligne suivante, mais le cinquième élément reste dans la première rangée.
    • Ensuite, utilisez :nth-child(n + 4) au lieu de :last-child.
    • À l'aide de pseudo-éléments, vous ne pouvez insérer du contenu dans deux endroits différents (::before et ::after), ne peut donc pas avoir plus de deux forcée des sauts de lignes. Toutefois, vous pouvez modifier la mise en page HTML et ajouter de large mannequin éléments aux bons endroits, comme beaucoup que vous le souhaitez.
    InformationsquelleAutor Oriol