css - 如何排除 flexbox 包装中的第一项？

Question

除了重新排序标记之外，是否有其他方法可以排除 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>

编辑:我已经试过了

:not(:first-child)

还有

:not(#tobeexcluded)

但它不起作用。这是实际的类构造，它是一个 drupal View :

.view-id-reference_list .view-content:not(:first-child) {
display: flex
flex-flow: wrap
}

fiddle :https://jsfiddle.net/m62090za/4/

这是我想要的:https://jsfiddle.net/Lxhpwqzn/1/但不更改标记。

Answer 1

Is there a way to exclude the first item in a flex wrap other than reorder the markup?

经过最初的一些混淆后，我们现在明白了，真正需要的是将内容包裹在第一个 div 之后。

显然，实现此目的的最简单方法是让第一个 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>