html – Flexbox项目换行到新行[复制]

参见英文答案 > Line break in multi-line flexbox7个
有一个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与其后的元素一起转移到新行？

解决方法

如果你看 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插入此换行符块：

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>

html – Flexbox项目换行到新行[复制]

解决方法

猜你在找的HTML相关文章