Flexbox项目换行到新行 [英] Flexbox item wrap to a new line

问题描述

有一个flexbox网格。

There is a flexbox grid.

.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及其后面的元素转移到新行？

How to transfer .new-string to a new line, along with the elements that follow it?

推荐答案

如果您查看这个好答案，您会注意到唯一的跨浏览器方式（不带2换行限制）正在插入 100％宽度的空白块（换行符）。因此，对于类似的标记，它看起来像是

If you look at this great answer you'll notice that the only cross-browser way (without 2 line break limit) is inserting 100%-width empty blocks ("line-breaks"). So for similar markup this will look like

.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插入以下换行符块：

If you want to preserve your markup style, you'll have to insert this line-break blocks 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>

这篇关于Flexbox项目换行到新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！