How to exclude the first item in a flexbox wrap?

by

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>

More Related Contents:

  1. Make a div span two rows in a grid
  2. Fill remaining vertical space with CSS using display:flex
  3. How does flex-wrap work with align-self, align-items and align-content?
  4. Flex-box: Align last row to grid
  5. Better way to set distance between flexbox items
  6. What’s the difference between align-content and align-items?
  7. How does flex-shrink factor in padding and border-box?
  8. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  9. How can I align one item right with flexbox?
  10. What does flex: 1 mean?
  11. Margin collapsing in flexbox
  12. How to change flexbox wrap?
  13. Create a Masonry grid with flexbox (or other CSS)
  14. css grid of squares with flexbox
  15. Every item to have the same width as the widest element [duplicate]
  16. Set flexbox children to have different heights to use up available space
  17. Flexible box model – display : flex, box, flexbox? [duplicate]
  18. Prevent flex item from exceeding parent height and make scroll bar work
  19. Are flex items block level element?
  20. Bootstrap change order of columns
  21. Flex auto margin not working in IE10/11
  22. What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)
  23. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  24. How can I change the order of Bootstrap columns?
  25. The difference between flex:1 and flex-grow:1
  26. How do I set distance between flexbox items?
  27. How to control number of items per row using media queries in Flexbox?
  28. Vertically center items with flexbox
  29. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  30. Horizontal masonry layout with flexbox CSS only [duplicate]

Leave a Comment