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 连同其后的元素一起转移到新行？

Answer 1

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

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

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>

Answer 3

作为替代方案，您可以简单地这样做

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%;
}

100% 宽度的弹性项目会给你换行符。 在 flex 网格中获取新行的最简单方法，当然你需要一个额外的 div，但我不觉得这样做很糟糕

Answer 4

所有弹性项目默认设置为order: 0。这意味着它们将按照它们在源代码中出现的顺序排列。

如果你给最后一个项目order: 1，这会在添加其他项目时强制它在最后一个。

::before 和 ::after pseudo elements on a flex container create new flex items。

因此，如果我们添加一个宽度足够大的伪元素，它将强制您的最后一项（由order 设置）到下一行。

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