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

Question

除了重新排序标记之外,有没有办法排除flex包中的第一项？

<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-id-reference_list .view-content:not(:first-child) {
display: flex
flex-flow: wrap
}

小提琴:https://jsfiddle.net/m62090za/4/

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

Answer 1

除了重新排序标记之外,有没有办法排除flex包中的第一项？

经过一些初步的混淆后,我们现在明白,实际需要的是内容在第一个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>