CODEWITHSUNDEEP
htmlcssflexbox
Altro
Altro

Reputation: 938

Linebreak in a column flexbox

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

Upvotes: 1

Views: 245

Answers (1)

Temani Afif
Temani Afif

Reputation: 272901

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>

Upvotes: 2

Related Questions