1

I can break it in a row direction but in column direction is pretty problematic, I need to do that in pure css add a class maybe or style something like that not much no js or anything here is my code

I am dealing with a dynamic menu where I almost can't control html so I need a css attribute to add to li so it makes the line break (so that it breaks into a new row)

ul {
  display: flex;
  flex-direction: column;
}

li {
  width:100px;
  height: 60px;
  background: red;
  margin: 10px;
}
<ul>
  <li></li> 
  <li></li>
  <li></li>
  <li></li>
  <li>Break here and start a new column</li>
  <li></li>
  <li></li>
  <li></li>  
  <li></li>

</ul>

Thanks

Altro
  • 878
  • 1
  • 7
  • 23
  • 1
    Why not use the grid? With flexbox, you will need to wrap the `li` elements in a wrapper element so that each wrapper element is aligned horizontally next to each other. – Yousaf Oct 20 '20 at 12:00
  • Yes I agree with Yousaf, grid would be a good way to achieve what you want: https://css-tricks.com/snippets/css/complete-guide-grid/ – Olivier Girardot Oct 20 '20 at 12:01
  • I will try and tell you, thanks – Altro Oct 20 '20 at 12:02
  • Nope CSS grid is very static I need something automatic, I am working with a dynamic menu which's html I can't control so I need to add a line breaking style every time menu-s submenu is ending – Altro Oct 20 '20 at 12:08

1 Answers1

2

It can be done using CSS grid:

ul {
  display: grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(1000,auto);
  justify-content:start;
}

.break + * {
  grid-row:1;
}

li {
  width: 100px;
  height: 30px;
  background: red;
  margin: 10px;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="break">Break here</li>
  <li></li>
  <li></li>
  <li></li>
  <li class="break">Break here</li>
  <li></li>
  <li class="break">Break here</li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • I will try this right now and tell you, EDIT: I tried it was great, I learned a lot of things from that, thanks a lot – Altro Oct 20 '20 at 12:10