如何指定一个元素，然后将其包装在 css flexbox 中? [英] How to specify an element after which to wrap in css flexbox?

问题描述

我认为这还不是 flexbox 标准的一部分，但是否有建议或强制在某个元素后换行的技巧?我想响应不同的页面大小并以不同的方式包装列表，而不需要额外的标记，这样我就不会在下一行有(例如)孤立的菜单项，而是在菜单中间中断.

I don't think this is part of the flexbox standard yet, but is there maybe a trick to suggest or force wrapping after a certain element? I'd like to respond to different page sizes and wrap a list differently without extra markup, so that rather than having (for example) orphaned menu items on the next line, I break in the middle of the menu.

这是起始 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/

See the jsfiddle for a more complete setup: http://jsfiddle.net/theazureshadow/ww8DR/

推荐答案

你可以通过在容器上设置这个来实现:

You can accomplish this by setting this on the container:

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 元素来强制在它之前和之后的元素之间换行.

This causes the child to make up 100% of the container width before any other calculation. Since the container is set to break in case there is not enough space it does so before and after this child. So you could use an empty div element to force the wrap between the element before and after it.

这篇关于如何指定一个元素，然后将其包装在 css flexbox 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！