How to specify an element after which to wrap in css flexbox? [duplicate]

by

You can accomplish this by setting this on the container:

ul {
    display: flex;
    flex-wrap: wrap;
}

And on the child you set this:

li:nth-child(2n) {
    flex-basis: 100%;
}


ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

li:nth-child(4n) {
  flex-basis: 100%;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

This causes the child to make up 100% of the container width before any other calculation. Since the container is set to break in case there is not enough space it does so before and after this child. So you could use an empty div element to force the wrap between the element before and after it.

More Related Contents:

  1. How to create one vertical column in between rows in Flexbox [closed]
  2. In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
  3. Vertical Align Center in Bootstrap 4 [duplicate]
  4. Chrome / Safari not filling 100% height of flex parent
  5. Why is a flex item limited to parent size?
  6. What are the differences between flex-basis and width?
  7. Aligning grid items across the entire row/column (like flex items can)
  8. Make flex-grow expand items based on their original size
  9. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  10. How to make flexbox items the same size?
  11. Scrolling a flexbox with overflowing content
  12. Usage of display property of flex box items
  13. How to align left last row/line in multiple line flexbox [duplicate]
  14. How to keep wrapped flex-items the same width as the elements on the previous row?
  15. What are the differences between flex-grow and width?
  16. Removing display:flex adds spaces around a link. Why?
  17. Padding-bottom/top in flexbox layout
  18. text-overflow ellipsis on flex child not working [duplicate]
  19. React native text going off my screen, refusing to wrap. What to do?
  20. Create a row of flexbox items with a max height defined by one child [duplicate]
  21. How to use safe center with flexbox?
  22. Why isn’t my justify-content property working?
  23. Difference between flex-end and end? [duplicate]
  24. How can I create multi columns from a single unordered list?
  25. How to stretch children to fill cross-axis?
  26. Issue when centering vertically with flexbox when heights are unknown
  27. Do I not understand the flex-grow property?
  28. Row Wrap in flex-box not wrapping in Safari
  29. What exactly flex-basis property sets?
  30. First-child full-width in Flexbox

Leave a Comment