Question

有一个弹性箱网格。

.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个换行符限制）是插入npm install react-scripts - 宽空块（“换行符”）。所以对于类似的标记，这看起来像

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

如果要保留标记样式，则必须通过JavaScript插入此<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>块：

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

Answer 2

作为替代方案，您可以简单地执行此操作

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％宽度的弹性项目将为您提供换行符。在弹性网格中获得新线的最简单方法，确定你需要一个额外的div，但我觉得这样做不是很糟糕

Answer 3

这似乎与Grid-layout有关。首先将项目内联放置，您可以使用

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Flexbox项目换行到新行

4 个答案: