How to specify an element after which to wrap in css flexbox

Question

I don t think this is part of the flexbox standard yet  but is there maybe a trick to suggest or force wrapping after a certain element  I d like to respond to different page sizes and wrap a list differently without extra markup  so that rather than having  for example  orphaned menu items on the next line  I break in the middle of the menu   Here s the starting html    lt ul gt       lt li gt One lt  li gt       lt li gt Two lt  li gt       lt li gt Three lt  li gt       lt li gt Four lt  li gt       lt li gt Five lt  li gt   lt  ul gt    And css   ul       display  flex      flex-wrap  wrap      I d love something like the following      inside media query targeting width    li nth-child 2n        flex-break  after      See the jsfiddle for a more complete setup  http   jsfiddle net theazureshadow ww8DR

User · Answer

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%;
}

_x000D_

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

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

_x000D_

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

_x000D_

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.

User · Answer

Here s an article with your full list of options  https   tobiasahlin com blog flexbox-break-to-new-row   EDIT  This is really easy to do with Grid now  https   codepen io anon pen mGONxv editors 1100                             I don t think you can break after a specific item  The best you can probably do is change the flex-basis at your breakpoints  So   ul     flex-flow  row wrap    display  flex     li     flex-grow  1    flex-shrink  0    flex-basis  50       media  min-width  40em    li     flex-basis  30       Here s a sample  http   cdpn io ndCzD                                                EDIT  You CAN break after a specific element  Heydon Pickering unleashed some css wizardry in an A List Apart article  http   alistapart com article quantity-queries-for-css  EDIT 2  Please have a look at this answer  Line break in multi-line flexbox   luksak also provides a great answer

User · Answer

There is part of the spec that sure sounds like this    right in the  flex layout algorithm  and  main sizing  sections      Otherwise  starting from the first uncollected item  collect   consecutive items one by one until the first time that the next   collected item would not fit into the flex container   s inner main   size  or until a forced break is encountered  If the very first   uncollected item wouldn   t fit  collect just it into the line  A break   is forced wherever the CSS2 1 page-break-before page-break-after    CSS21  or the CSS3 break-before break-after  CSS3-BREAK  properties   specify a fragmentation break    From http   www w3 org TR css-flexbox-1  main-sizing  It sure sounds like  aside from the fact that page-breaks ought to be for printing   when laying out a potentially multi-line flex layout  which I take from another portion of the spec is one without flex-wrap  nowrap  a page-break-after  always or break-after  always should cause a break  or wrap to the next line    flex-container     display  flex    flex-flow  row wrap      child     flex-grow  1      child break-here     page-break-after  always    break-after  always      However  I have tried this and it hasn t been implemented that way in      Safari  up to 7  Chrome  up to 43 dev  Opera  up to 28 dev  amp  12 16  IE  up to 11    It does work the way it sounds  to me  at least  like in    Firefox  28     Sample at http   codepen io morewry pen JoVmVj    I didn t find any other requests in the bug tracker  so I reported it at https   code google com p chromium issues detail id 473481   But the topic took to the mailing list and  regardless of how it sounds  that s not what apparently they meant to imply  except I guess for pagination   So there s no way to wrap before or after a particular box in flex layout without nesting successive flex layouts inside flex children or fiddling with specific widths  e g  flex-basis  100       This is deeply annoying  of course  since working with the Firefox implementation confirms my suspicion that the functionality is incredibly useful   Aside from the improved vertical alignment  the lack obviates a good deal of the utility of flex layout in numerous scenarios  Having to add additional wrapping tags with nested flex layouts to control the point at which a row wraps increases the complexity of both the HTML and CSS and  sadly  frequently renders order useless  Similarly  forcing the width of an item to 100  reduces the  responsive  potential of the flex layout or requires a lot of highly specific queries or count selectors  e g  the techniques that may accomplish the general result you need that are mentioned in the other answers    At least floats had clear   Something may get added at some point or another for this  one hopes

User · Answer

Setting a min-width on child elements will also create a breakpoint  For example breaking every 3 elements   flex-grow  1  min-width  33      If there are 4 elements  this will have the 4th element wrap taking the full 100   If there are 5 elements  the 4th and 5th elements will wrap and take each 50    Make sure to have parent element with    flex-wrap  wrap

User · Answer

The only thing that appears to work is to set flex-wrap  wrap  on the container and them somehow make the child you want to break out after to fill the full width  so width  100   should work   If  however  you can t stretch the element to 100   for example  if it s an  lt img gt    you can apply a margin to it  like width  50px  margin-right  calc 100  - 50px

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

Examples related to css

Examples related to flexbox