CSS 如何排除 flexbox 包装中的第一项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36470038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to exclude the first item in a flexbox wrap?
提问by Volker
Is there a way to exclude the first item in a flex wrap other than reorder the markup?
除了重新排序标记之外，有没有办法排除 flex wrap 中的第一个项目？
<div class="container">
<div id="tobeexcluded">abc</div>
<div class="flexitem">content</div>
<div class="flexitem">content</div>
<div class="flexitem">content</div>
</div>
EDIT: I've tried now
编辑：我现在试过了
:not(:first-child)
and also
并且
:not(#tobeexcluded)
but it's not working. This is the actual class construction, it's a drupal view:
但它不起作用。这是实际的类构造，它是一个 Drupal 视图：
.view-id-reference_list .view-content:not(:first-child) {
display: flex
flex-flow: wrap
}
Fiddle: https://jsfiddle.net/m62090za/4/
小提琴：https: //jsfiddle.net/m62090za/4/
Here's what i want: https://jsfiddle.net/Lxhpwqzn/1/but without changing the markup.
这是我想要的：https: //jsfiddle.net/Lxhpwqzn/1/但不更改标记。
回答by Paulie_D
Is there a way to exclude the first item in a flex wrap other than reorder the markup?
除了重新排序标记之外，有没有办法排除 flex wrap 中的第一个项目？
After some initial confusion we now understand that what is actually required is for the content to wrap afterthe first div.
经过一些初步的混淆后，我们现在明白实际上需要的是内容在第一个 div之后换行。
Obviously, the simplest method to achieve this is for the first div to be 100% wide of the parent.
显然，实现这一点的最简单方法是第一个 div 的宽度为父级的 100%。
.view-container .view-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.filterbox {
flex: 0 0 100%;
}<div class="view-container">
<div class="view-content">
<div class="filterbox">FILTER</div>
<div class="flex-item">
Flex-ITEM
</div>
<div class="flex-item">
Flex-ITEM
</div>
<div class="flex-item">
Flex-ITEM
</div>
</div>
</div>