如何排除Flexbox包装中的第一项? [英] How to exclude the first item in a flexbox wrap?

问题描述

除了重新排列标记之外，是否有其他方法可以排除弹性包装中的第一项?

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

<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视图:

but it's not working. This is the actual class construction, it's a drupal view:

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

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

这就是我想要的: https://jsfiddle.net/Lxhpwqzn/1/但没有更改标记.

Here's what i want: https://jsfiddle.net/Lxhpwqzn/1/ but without changing the markup.

推荐答案

除了重新排列标记之外，是否有其他方法可以排除弹性包装中的第一项?

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

经过一番困惑，我们现在了解到，实际上需要的是将内容包装在 第一格之后.

After some initial confusion we now understand that what is actually required is for the content to wrap after the first div.

显然，最简单的方法是将第一个div的宽度设为父级的100％.

Obviously, the simplest method to achieve this is for the first div to be 100% wide of the parent.

.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>

这篇关于如何排除Flexbox包装中的第一项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！