web-dev-qa-db-fra.com

Flexbox Item Wrap à une nouvelle ligne

Il y a une grille de flexbox.

.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
}
<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item new-string"></div>
</div>

Comment transférer une nouvelle chaîne sur une nouvelle ligne, avec les éléments qui la suivent?

htmlcsscss3flexbox
7
Yuri

Si vous regardez cette excellente réponse vous remarquerez que la seule façon de naviguer entre plusieurs navigateurs (sans limite de saut de ligne) consiste à insérer 100%- width de blocs vides ("line-breaks"). Donc, pour un balisage similaire, cela ressemblera à

.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
}

.line-break {
  width: 100%;
}
<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="line-break"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="line-break"></div>
  <div class="item"></div>
  <div class="line-break"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Si vous souhaitez conserver votre style de balisage, vous devez insérer ces blocs line-break via JavaScript:

var items = document.querySelectorAll(".flex > .item.new-string");

for (var i = 0; i < items.length; i++) {
  var lineBreak = document.createElement('div');
  lineBreak.className = "line-break";

  items[i].parentNode.insertBefore(lineBreak, items[i]);
}
.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
}

.line-break {
  width: 100%;
}
<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item new-string"></div>
  <div class="item"></div>
  <div class="item new-string"></div>
  <div class="item new-string"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

5
Vadim Ovchinnikov

Comme alternative, vous pouvez simplement faire ceci

HTML

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item line-break"></div>
  <div class="item new-string"></div>
</div>

CSS

.line-break {
    width: 100%;
}

L'élément de flex à 100% de largeur vous donnera le saut de ligne ... C'est le moyen le plus simple d'obtenir une nouvelle ligne dans la grille de flex, vous avez sûrement besoin d'une div supplémentaire

2
Huangism

Cela semble être possible avec Grid-layout. Premier à placer des éléments en ligne, vous pouvez utiliser 

grid-template-columns: repeat(auto-fill, 50px);

de sorte que chaque élément prenne 50 px et qu'il positionnera les éléments sur une ligne jusqu'à ce qu'aucun autre élément ne puisse tenir dans une seule ligne. Et puis vous pouvez utiliser grid-column-start: 1; sur un élément spécifique pour qu'il passe à la nouvelle ligne.

* {
  box-sizing: border-box;
}
.flex {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 50px);
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
}

.new-string {
  grid-column-start: 1;
  background: red;
}
<div class="flex"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item new-string"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item new-string"></div><div class="item"></div><div class="item"></div><div class="item new-string"></div><div class="item"></div></div>

2
Nenad Vracar

Tous les éléments flexibles sont définis par défaut sur order: 0 . Cela signifie qu'ils seront présentés dans l'ordre dans lequel ils apparaissent dans le code source.

Si vous donnez le dernier élément order: 1, cela le forcera d'être le dernier lorsque des éléments supplémentaires seront ajoutés.

Les pseudo-éléments ::before et ::aftersur un conteneur flexible créent de nouveaux éléments flexibles .

Donc, si nous ajoutons un pseudo-élément avec une largeur suffisante, il forcera votre dernier élément (défini par order) à la ligne suivante.

.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
}

.new-string {
  order: 1;
}

.flex::after {
  content: "";
  flex: 0 0 100%;
  height: 0;
}
<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item new-string"></div>
</div>

1
Michael_B