How to exclude the first item in a flexbox wrap?

Question

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>

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:

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

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

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

Possible duplicate of [css not:first-child selector](http://stackoverflow.com/questions/12289853/css-notfirst-child-selector) — Shekhar Pankaj, Apr 07 '16 at 07:59
are your serious or sleepy? this is not at all duplicate for the link you given — Gaurav Aggarwal, Apr 07 '16 at 08:10
You could exclude it using css `#tobeexcluded { display: none }`. — Robert, Apr 07 '16 at 08:33
I don't want to hide it, it should be removed from the flexbox wrap. — Volker, Apr 07 '16 at 08:38
As you can see in the fiddle, the flexbox wrap isn't working anymore when i add :not(:first-child) to the div. The filter-div should be above the flex-flow... — Volker, Apr 07 '16 at 08:59

Paulie_D · Accepted Answer · 2016-10-07T12:32:26.317

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.

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>

I read this, thought it wasn't what I was looking for (cause it was so simple), closed the tab, realized the beauty of it, and reopened it again. — Tracy Fu, Jan 10 '18 at 00:59

How to exclude the first item in a flexbox wrap?

1 Answers1

Linked

Related