Shubham Khatri Shubham Khatri - 5 months ago 7
CSS Question

Set only two flexboxes in one row

I have been trying this for a long time but nothing seems to be working.
I have some

divs
that I am generating dynamically. Now I want each row to contain only
two divs
, so I read that I should use
flex css
property. But I am not getting it right. Currently all the divs are coming in a single row.
Here is my code



.flexbox
{
display: flex;
}



.flexbox > div
{
flex: 1 1 50%;
padding: 10px;
width: 20px;
height: 100px;
}

<div class="flexbox">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>





Thanks for any help in advance

Answer

You should add flex-wrap: wrap to make flex items break to multiple lines, and also box-sizing: border-box to keep padding inside width of element.

* {
  box-sizing: border-box;
}
.flexbox {
  display: flex;
  flex-wrap: wrap;
}
.flexbox > div {
  flex: 1 1 50%;
  padding: 10px;
  height: 100px;
}
<div class="flexbox">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>