Flexbox项目换行到新行[重复]

Posted 2023-03-05

【中文标题】Flexbox项目换行到新行[重复]

【英文标题】：Flexbox item wrap to a new line [duplicate]

【发布时间】：2017-12-18 14:33:13

【问题描述】：

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

【问题讨论】：

一种方法是 - 在它之前放置一个 div 并将其设置为 100% 宽度，或者您可以使用 [suedo 元素来实现相同的效果

1) 是否允许更改标记？ 2) 这里允许使用 javascript 吗？

@VadimOvchinnikov，1）没有它是可取的，但它是允许的。 2) 允许

您可以将flex-basis: 100% 用于要换行的项目。

【参考方案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>

【参考方案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>

【讨论】：

如果你走这条路线，请务必检查浏览器兼容性

很好的答案，值得注意的是，即使使用过时的标记，也无法将此标记转换为 IE/Edge。在 IE/Edge 中没有自动放置，您需要手动为每个单元格指定行和列（除非它们每个单元格内容都将堆叠在单个单元格中）但是这里我们不能这样做（由于需要灵活的自动生成网格）。

【参考方案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，但我不觉得这样做很糟糕

【参考方案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>

【讨论】：

但是如果你需要移动几次，那么这个选项就不起作用了