Html Flexbox项目换行到新行

有一个flexbox网格

.flex{
显示器：flex；
柔性包装：包装；
边框：2倍纯红；
}
.项目{
宽度：50px；
高度：50px；
保证金：5px；
边框：2件纯蓝；
}

---

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

如果您给出最后一个项目

顺序：1

，则在添加其他项目时，它将强制为最后一个项目

：：在

之前和

：：在

之后

因此，如果我们添加一个具有足够大宽度的伪元素，它将强制您的最后一项（由

顺序设置）进入下一行


.flex{
显示器：flex；
柔性包装：包装；
边框：2倍纯红；
}
.项目{
宽度：50px；
高度：50px；
保证金：5px；
边框：2件纯蓝；
}
.新字符串{
顺序：1；
}
.flex：：之后{
内容：“；
弹性：0.100%；
身高：0；
}
作为替代方案，您可以简单地执行此操作

HTML

100%宽度的弹性项目将为您提供换行符。
在flex网格中获得新行的最简单方法，当然您需要一个额外的div，但我认为这样做并没有那么糟糕，如果您查看一下，您会注意到唯一的跨浏览器方法（没有两个换行限制）是插入
100%
宽度的空块（“换行”）。因此，对于类似的标记，如下所示


.flex{
显示器：flex；
柔性包装：包装；
边框：2倍纯红；
}
.项目{
宽度：50px；
高度：50px；
保证金：5px；
边框：2件纯蓝；
}
.换行{
宽度：100%；
}
这似乎与网格布局有关。
首先，将您可以使用的项目放在内联位置

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

因此，每个项目需要50px，它将项目放在一行中，直到没有更多的项目可以放在一行中。然后可以使用
网格列开始：1以便转到新行


*{
框大小：边框框；
}
.flex{
显示：网格；
栅隙：10px；
网格模板列：重复（自动填充，50px）；
边框：2倍纯红；
}
.项目{
宽度：50px；
高度：50px；
保证金：5px；
边框：2件纯蓝；
}
.新字符串{
网格列开始：1；
背景：红色；
}
但如果您需要移动几次，则此选项将不起作用一种方法是在其前面放置一个div，并将其设置为100%宽度，或者您可以使用[suedo元素实现相同的功能1）允许更改标记吗？2）这里允许使用JavaScript吗？@VadimOvchinnikov，1）不使用它是可取的，但它是允许的。2）允许您可以使用
flex-basis:100%
来包装新行中的项目。如果您使用此方法，请确保检查浏览器兼容性Great answer、 值得注意的是，即使使用过时的标记，也不可能将此标记转换为IE/Edge。在IE/Edge中，没有自动放置功能，您需要手动为每个单元格指定行和列（除非每个单元格内容都堆叠在单个单元格中），但在这里我们无法这样做（因为需要灵活的自动生成网格）。
.line-break {
    width: 100%;
}

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