How to specify line breaks in a multi-line flexbox layout

Question

Is there a way to make a line break in multiple line flexbox   For example to break after each 3rd item in this CodePen    x000D   x000D   container   x000D    background  tomato  x000D    display  flex  x000D    flex-flow  row wrap  x000D    align-content  space-between  x000D    justify-content  space-between  x000D    x000D   item   x000D    width  100px  x000D    height  100px  x000D    background  gold  x000D    border  1px solid black  x000D    font-size  30px  x000D    line-height  100px  x000D    text-align  center  x000D    margin  10px  x000D    x000D   item nth-child 3n    x000D    background  silver  x000D    x000D   lt div class  container  gt  x000D     lt div class  item  gt 1 lt  div gt  x000D     lt div class  item  gt 2 lt  div gt  x000D     lt div class  item  gt 3 lt  div gt  x000D     lt div class  item  gt 4 lt  div gt  x000D     lt div class  item  gt 5 lt  div gt  x000D     lt div class  item  gt 6 lt  div gt  x000D     lt div class  item  gt 7 lt  div gt  x000D     lt div class  item  gt 8 lt  div gt  x000D     lt div class  item  gt 9 lt  div gt  x000D     lt div class  item  gt 10 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Like   item nth-child 3n        line-break  after

User · Answer

I think the traditional way is flexible and fairly easy to understand:

Markup

<div class="flex-grid">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-3">.col-3</div>
    <div class="col-9">.col-9</div>

    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
</div>

Create grid.css file:

.flex-grid {
  display: flex;
  flex-flow: wrap;
}

.col-1 {flex: 0 0 8.3333%}
.col-2 {flex: 0 0 16.6666%}
.col-3 {flex: 0 0 25%}
.col-4 {flex: 0 0 33.3333%}
.col-5 {flex: 0 0 41.6666%}
.col-6 {flex: 0 0 50%}
.col-7 {flex: 0 0 58.3333%}
.col-8 {flex: 0 0 66.6666%}
.col-9 {flex: 0 0 75%}
.col-10 {flex: 0 0 83.3333%}
.col-11 {flex: 0 0 91.6666%}
.col-12 {flex: 0 0 100%}

[class*="col-"] {
  margin: 0 0 10px 0;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}

I've created an example (jsfiddle)

Try to resize the window under 400px, it's responsive!!

User · Answer

I tried several answers here  and none of them worked  Ironically  what did work was about the simplest alternative to a  lt br  gt  one could attempt    lt div style  flex-basis  100    gt  lt  div gt   or you could also do    lt div style  width  100    gt  lt  div gt   Place that wherever you want a new line  It seems to work even with adjacent  lt span gt  s  but I m using it with adjacent  lt div gt  s

User · Answer

The simplest and most reliable solution is inserting flex items at the right places  If they are wide enough  width  100    they will force a line break    x000D   x000D   container   x000D    background  tomato  x000D    display  flex  x000D    flex-flow  row wrap  x000D    align-content  space-between  x000D    justify-content  space-between  x000D    x000D   item   x000D    width  100px  x000D    background  gold  x000D    height  100px  x000D    border  1px solid black  x000D    font-size  30px  x000D    line-height  100px  x000D    text-align  center  x000D    margin  10px x000D    x000D   item nth-child 4n - 1    x000D    background  silver  x000D    x000D   line-break   x000D    width  100   x000D    x000D   lt div class  container  gt  x000D     lt div class  item  gt 1 lt  div gt  x000D     lt div class  item  gt 2 lt  div gt  x000D     lt div class  item  gt 3 lt  div gt  x000D     lt div class  line-break  gt  lt  div gt  x000D     lt div class  item  gt 4 lt  div gt  x000D     lt div class  item  gt 5 lt  div gt  x000D     lt div class  item  gt 6 lt  div gt  x000D     lt div class  line-break  gt  lt  div gt  x000D     lt div class  item  gt 7 lt  div gt  x000D     lt div class  item  gt 8 lt  div gt  x000D     lt div class  item  gt 9 lt  div gt  x000D     lt div class  line-break  gt  lt  div gt  x000D     lt div class  item  gt 10 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    But that s ugly and not semantic  Instead  we could generate pseudo-elements inside the flex container  and use order to move them to the right places    x000D   x000D   container   x000D    background  tomato  x000D    display  flex  x000D    flex-flow  row wrap  x000D    align-content  space-between  x000D    justify-content  space-between  x000D    x000D   item   x000D    width  100px  x000D    background  gold  x000D    height  100px  x000D    border  1px solid black  x000D    font-size  30px  x000D    line-height  100px  x000D    text-align  center  x000D    margin  10px x000D    x000D   item nth-child 3n    x000D    background  silver  x000D    x000D   container  before   container  after   x000D    content      x000D    width  100   x000D    order  1  x000D    x000D   item nth-child n   4    x000D    order  1  x000D    x000D   item nth-child n   7    x000D    order  2  x000D    x000D   lt div class  container  gt  x000D     lt div class  item  gt 1 lt  div gt  x000D     lt div class  item  gt 2 lt  div gt  x000D     lt div class  item  gt 3 lt  div gt  x000D     lt div class  item  gt 4 lt  div gt  x000D     lt div class  item  gt 5 lt  div gt  x000D     lt div class  item  gt 6 lt  div gt  x000D     lt div class  item  gt 7 lt  div gt  x000D     lt div class  item  gt 8 lt  div gt  x000D     lt div class  item  gt 9 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    But there is a limitation  the flex container can only have a   before and a   after pseudo-element  That means you can only force 2 line breaks   To solve that  you can generate the pseudo-elements inside the flex items instead of in the flex container  This way you won t be limited to 2  But those pseudo-elements won t be flex items  so they won t be able to force line breaks   But luckily  CSS Display L3 has introduced display  contents  currently only supported by Firefox 37       The element itself does not generate any boxes  but its children and   pseudo-elements still generate boxes as normal  For the purposes of   box generation and layout  the element must be treated as if it had   been replaced with its children and pseudo-elements in the document   tree    So you can apply display  contents to the children of the flex container  and wrap the contents of each one inside an additional wrapper  Then  the flex items will be those additional wrappers and the pseudo-elements of the children    x000D   x000D   container   x000D    background  tomato  x000D    display  flex  x000D    flex-flow  row wrap  x000D    align-content  space-between  x000D    justify-content  space-between  x000D    x000D   item   x000D    display  contents  x000D    x000D   item  gt  div   x000D    width  100px  x000D    background  gold  x000D    height  100px  x000D    border  1px solid black  x000D    font-size  30px  x000D    line-height  100px  x000D    text-align  center  x000D    margin  10px  x000D    x000D   item nth-child 3n   gt  div   x000D    background  silver  x000D    x000D   item nth-child 3n   after   x000D    content      x000D    width  100   x000D    x000D   lt div class  container  gt  x000D     lt div class  item  gt  lt div gt 1 lt  div gt  lt  div gt  x000D     lt div class  item  gt  lt div gt 2 lt  div gt  lt  div gt  x000D     lt div class  item  gt  lt div gt 3 lt  div gt  lt  div gt  x000D     lt div class  item  gt  lt div gt 4 lt  div gt  lt  div gt  x000D     lt div class  item  gt  lt div gt 5 lt  div gt  lt  div gt  x000D     lt div class  item  gt  lt div gt 6 lt  div gt  lt  div gt  x000D     lt div class  item  gt  lt div gt 7 lt  div gt  lt  div gt  x000D     lt div class  item  gt  lt div gt 8 lt  div gt  lt  div gt  x000D     lt div class  item  gt  lt div gt 9 lt  div gt  lt  div gt  x000D     lt div class  item  gt  lt div gt 10 lt  div gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Alternatively  according to Fragmenting Flex Layout and CSS Fragmentation  Flexbox allows forced breaks by using break-before  break-after or their CSS 2 1 aliases    item nth-child 3n      page-break-after  always     CSS 2 1 syntax      break-after  always     New syntax         x000D   x000D   container   x000D    background  tomato  x000D    display  flex  x000D    flex-flow  row wrap  x000D    align-content  space-between  x000D    justify-content  space-between  x000D    x000D   item   x000D    width  100px  x000D    background  gold  x000D    height  100px  x000D    border  1px solid black  x000D    font-size  30px  x000D    line-height  100px  x000D    text-align  center  x000D    margin  10px x000D    x000D   item nth-child 3n    x000D    page-break-after  always  x000D    background  silver  x000D    x000D   lt div class  container  gt  x000D     lt div class  item  gt 1 lt  div gt  x000D     lt div class  item  gt 2 lt  div gt  x000D     lt div class  item  gt 3 lt  div gt  x000D     lt div class  item  gt 4 lt  div gt  x000D     lt div class  item  gt 5 lt  div gt  x000D     lt div class  item  gt 6 lt  div gt  x000D     lt div class  item  gt 7 lt  div gt  x000D     lt div class  item  gt 8 lt  div gt  x000D     lt div class  item  gt 9 lt  div gt  x000D     lt div class  item  gt 10 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Forced line breaks in flexbox are not widely supported yet  but it works on Firefox

User · Answer

Another possible solution that doesn t require to add any extra markup is to add some dynamic margin to separate the elements   In the case of the example  this can be done with the help of calc    just adding margin-left and margin-right to the 3n 2 element  2  5  8    item nth-child 3n 2      background  silver    margin  10px calc 50  - 175px       Snippet Example   x000D   x000D   container   x000D    background  tomato  x000D    display  flex  x000D    flex-flow  row wrap  x000D    align-content  space-between  x000D    justify-content  space-between  x000D    x000D   item   x000D    width  100px  x000D    height  100px  x000D    background  gold  x000D    border  1px solid black  x000D    font-size  30px  x000D    line-height  100px  x000D    text-align  center  x000D    margin  10px  x000D    x000D   item nth-child 3n 2    x000D    background  silver  x000D    margin  10px calc 50  - 175px   x000D    x000D   lt div class  container  gt  x000D     lt div class  item  gt 1 lt  div gt  x000D     lt div class  item  gt 2 lt  div gt  x000D     lt div class  item  gt 3 lt  div gt  x000D     lt div class  item  gt 4 lt  div gt  x000D     lt div class  item  gt 5 lt  div gt  x000D     lt div class  item  gt 6 lt  div gt  x000D     lt div class  item  gt 7 lt  div gt  x000D     lt div class  item  gt 8 lt  div gt  x000D     lt div class  item  gt 9 lt  div gt  x000D     lt div class  item  gt 10 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For future questions  It s also possible to do it by using float property and clearing it in each 3 elements   Here s an example I ve made    x000D   x000D   grid   x000D    display  inline-block  x000D    x000D   x000D   cell   x000D    display  inline-block  x000D    position  relative  x000D    float  left  x000D    margin  8px  x000D    width  48px  x000D    height  48px  x000D    background-color   bdbdbd  x000D    font-family   Helvetica    Arial   sans-serif  x000D    font-size  14px  x000D    font-weight  400  x000D    line-height  20px  x000D    text-indent  4px  x000D    color   fff  x000D    x000D   x000D   cell nth-child 3n     cell   x000D    clear  both  x000D    x000D   lt div class  grid  gt  x000D     lt div class  cell  gt 1 lt  div gt  x000D     lt div class  cell  gt 2 lt  div gt  x000D     lt div class  cell  gt 3 lt  div gt  x000D     lt div class  cell  gt 4 lt  div gt  x000D     lt div class  cell  gt 5 lt  div gt  x000D     lt div class  cell  gt 6 lt  div gt  x000D     lt div class  cell  gt 7 lt  div gt  x000D     lt div class  cell  gt 8 lt  div gt  x000D     lt div class  cell  gt 9 lt  div gt  x000D     lt div class  cell  gt 10 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I just want to throw this answer in the mix  intended as a reminder that     given the right conditions     you sometimes don t need to overthink the issue at hand  What you want might be achievable with flex  wrap and max-width instead of  nth-child   x000D   x000D  ul     display  flex    flex-wrap  wrap    justify-content  center    max-width  420px    list-style-type  none    background-color  tomato    margin  0 auto    padding  0     li     display  inline-block    background-color   ccc    border  1px solid  333    width  23px    height  23px    text-align  center    font-size  1rem    line-height  1 5    margin  0 2rem    flex-shrink  0    x000D   lt div class  root  gt     lt ul gt       lt li gt A lt  li gt       lt li gt B lt  li gt       lt li gt C lt  li gt       lt li gt D lt  li gt       lt li gt E lt  li gt       lt li gt F lt  li gt       lt li gt G lt  li gt       lt li gt H lt  li gt       lt li gt I lt  li gt       lt li gt J lt  li gt       lt li gt K lt  li gt       lt li gt L lt  li gt       lt li gt M lt  li gt       lt li gt N lt  li gt       lt li gt O lt  li gt       lt li gt P lt  li gt       lt li gt Q lt  li gt       lt li gt R lt  li gt       lt li gt S lt  li gt       lt li gt T lt  li gt       lt li gt U lt  li gt       lt li gt V lt  li gt       lt li gt W lt  li gt       lt li gt X lt  li gt       lt li gt Y lt  li gt       lt li gt Z lt  li gt     lt  ul gt   lt  div gt  x000D   x000D   x000D   https   jsfiddle net age3qp4d

User · Answer

From my perspective it is more semantic to use  lt hr gt  elements as line breaks between flex items    x000D   x000D   container   x000D    display  flex  x000D    flex-flow  wrap  x000D    x000D   x000D   container hr   x000D    width  100   x000D    x000D   lt div class  container  gt  x000D     lt div gt 1 lt  div gt  x000D     lt div gt 2 lt  div gt  x000D     lt hr gt  x000D     lt div gt 3 lt  div gt  x000D     lt div gt 2 lt  div gt  x000D        x000D   lt  div gt  x000D   x000D   x000D    Tested in Chrome 66  Firefox 60 and Safari 11

User · Answer

Oriol has an excellent answer  sadly as of October 2017  neither display contents  neither page-break-after is widely supported  better said it s about Firefox which supports this but not the other players  I have come up with the following  quot hack quot  which I consider better than hard coding in a break after every 3rd element  because that will make it very difficult to make the page mobile friendly  As said it s a hack and the drawback is that you need to add quite a lot of extra elements for nothing  but it does the trick and works cross browser even on the dated IE11  The  quot hack quot  is to simply add an additional element after each div  which is set to display none and then used the css nth-child to decide which one of this should be actually made visible forcing a line brake like this   x000D   x000D   container     background  tomato    display  flex    flex-flow  row wrap    justify-content  space-between     item     width  100px    background  gold    height  100px    border  1px solid black    font-size  30px    line-height  100px    text-align  center    margin  10px    item nth-child 3n-1      background  silver     breaker     display  none     breaker nth-child 3n      display  block    width  100     height  0    x000D   lt div class  container  gt     lt div class  item  gt 1 lt  div gt     lt p class  breaker  gt  lt  p gt        lt div class  item  gt 2 lt  div gt     lt p class  breaker  gt  lt  p gt        lt div class  item  gt 3 lt  div gt     lt p class  breaker  gt  lt  p gt        lt div class  item  gt 4 lt  div gt     lt p class  breaker  gt  lt  p gt        lt div class  item  gt 5 lt  div gt     lt p class  breaker  gt  lt  p gt        lt div class  item  gt 6 lt  div gt     lt p class  breaker  gt  lt  p gt        lt div class  item  gt 7 lt  div gt     lt p class  breaker  gt  lt  p gt        lt div class  item  gt 8 lt  div gt     lt p class  breaker  gt  lt  p gt        lt div class  item  gt 9 lt  div gt     lt p class  breaker  gt  lt  p gt        lt div class  item  gt 10 lt  div gt     lt p class  breaker  gt  lt  p gt   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D   container   x000D    background  tomato  x000D    display  flex  x000D    flex-flow  row wrap  x000D    align-content  space-between  x000D    justify-content  space-between  x000D    x000D   x000D   item   x000D    width  100px  x000D    height  100px  x000D    background  gold  x000D    border  1px solid black  x000D    font-size  30px  x000D    line-height  100px  x000D    text-align  center  x000D    margin  10px  x000D    x000D   lt div class  container  gt  x000D     lt div gt  x000D       lt div class  item  gt 1 lt  div gt  x000D       lt div class  item  gt 2 lt  div gt  x000D       lt div class  item  gt 3 lt  div gt  x000D     lt  div gt  x000D     lt div gt  x000D       lt div class  item  gt 4 lt  div gt  x000D       lt div class  item  gt 5 lt  div gt  x000D       lt div class  item  gt 6 lt  div gt  x000D     lt  div gt  x000D     lt div gt  x000D       lt div class  item  gt 7 lt  div gt  x000D       lt div class  item  gt 8 lt  div gt  x000D       lt div class  item  gt 9 lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt 10 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    you could try wrapping the items in a dom element like here  with this you dont have to know a lot of css just having a good structure will solve the problem

User · Answer

You want a semantic linebreak   Then consider using  lt br gt   W3Schools may suggest you that BR is just for writing poems  mine is coming soon  but you can change the style so it behaves as a 100  width block element that will push your content to the next line  If  br  suggests a break then it seems more appropriate to me than using hr or a 100  div and makes the html more readable   Insert the  lt br gt  where you need linebreaks and style it like this        Use   gt   to avoid styling   lt br gt   inside your boxes    container  gt  br         width  100       content           You can disable  lt br gt  with media queries  by setting display  to block or none as appropriate  I ve included an example of this but left it commented out    You can use order  to set the order if needed too   And you can put as many as you want  with different classes or names  -    x000D   x000D   container   x000D    background  tomato  x000D    display  flex  x000D    flex-flow  row wrap  x000D    justify-content  space-between  x000D    x000D   item   x000D    width  100px  x000D    background  gold  x000D    height  100px  x000D    border  1px solid black  x000D    font-size  30px  x000D    line-height  100px  x000D    text-align  center  x000D    margin  10px x000D    x000D   x000D   container  gt  br x000D    x000D    width  100   x000D    content      x000D    x000D   x000D      linebreak1  x000D        x000D        display  none  x000D       x000D   x000D      media  min-width  768px   x000D       x000D         linebreak1 x000D          x000D           display  block  x000D          x000D       x000D   lt div class  container  gt  x000D     lt div class  item  gt 1 lt  div gt  x000D     lt div class  item  gt 2 lt  div gt  x000D     lt br class  linebreak1   gt  x000D     lt div class  item  gt 3 lt  div gt  x000D     lt div class  item  gt 4 lt  div gt  x000D     lt div class  item  gt 5 lt  div gt  x000D     lt div class  item  gt 6 lt  div gt  x000D     lt div class  item  gt 7 lt  div gt  x000D     lt div class  item  gt 8 lt  div gt  x000D     lt div class  item  gt 9 lt  div gt  x000D     lt div class  item  gt 10 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      No need to limit yourself to what W3Schools says

[html] How to specify line breaks in a multi-line flexbox layout?

Examples related to html

Examples related to css

Examples related to flexbox