如何在css flexbox中指定要包装的元素？
如何在css flexbox中指定要包装的元素？
提问于 2013-10-25 03:27:36
我认为这还不是flexbox标准的一部分，但在某个元素之后是否有建议或强制包装的技巧？我想对不同的页面大小作出响应，并在没有额外标记的情况下以不同的方式包装列表，这样我就不会(例如)在下一行有孤立的菜单项，而是在菜单中间中断。
下面是开始的html：
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>和css：
ul {
display: flex;
flex-wrap: wrap;
}我喜欢下面这样的东西：
/* inside media query targeting width */
li:nth-child(2n) {
flex-break: after;
}有关更完整的设置，请参阅jsfiddle：http://jsfiddle.net/theazureshadow/ww8DR/
回答 3
Stack Overflow用户
发布于 2015-05-05 21:52:30
您可以通过在容器上设置以下内容来完成此操作：
ul {
display: flex;
flex-wrap: wrap;
}在孩子身上设置如下内容：
li:nth-child(2n) {
flex-basis: 100%;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
li:nth-child(4n) {
flex-basis: 100%;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
这会导致子对象在进行任何其他计算之前占容器宽度的100%。由于容器被设置为在没有足够空间的情况下断开，因此它在这个子级之前和之后都会这样做。因此，您可以使用一个空的div元素来强制在元素之前和之后的元素之间换行。
Stack Overflow用户
发布于 2017-01-25 04:10:30
设置子元素的最小宽度也会创建断点。例如，每3个元素中断一次，
flex-grow: 1;
min-width: 33%; 如果有4个元素，这将使第4个元素换行占满100%。如果有5个元素，则第4个和第5个元素将包装并各占50%。
确保父元素带有，
flex-wrap: wrapStack Overflow用户
发布于 2018-04-06 22:43:07
唯一起作用的似乎是在容器上设置flex-wrap: wrap;，然后它们以某种方式使您想要突破的孩子填满整个宽度，所以width: 100%;应该可以工作。
但是，如果您不能将元素伸展到100% (例如，如果它是一个<img>)，则可以对其应用边距，如width: 50px; margin-right: calc(100% - 50px)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19574851
复制相关文章
相似问题