Flexbox 项目换行

Question

有一个 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>

如何将 .new-string 连同其后的元素一起换行？

原文由 Yuri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您查看 这个很好的答案，您会注意到唯一的跨浏览器方式（没有 2 个换行符限制）是插入 100% 空块（“换行符”）。所以对于类似的标记，这看起来像

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

如果您想保留标记样式，则必须通过 JavaScript 插入此 line-break 块：

 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>

原文由 Vadim Ovchinnikov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这似乎与网格布局有关。首先定位你可以使用的内联项目

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

这样每个项目占用 50px 并且它会将项目排成一行，直到没有更多的项目可以放在一行中。然后您可以在特定项目上使用 grid-column-start: 1; 以便它转到新行。

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

原文由 Nenad Vracar 发布，翻译遵循 CC BY-SA 3.0 许可协议