Flexbox: Is it possible to control the amount of items aligned with "space-between"?

Asked

Viewed 92 times

0

I have the following case, a father div with 5 daughter Ivs, and I need them to line up two by two using the space-between in the father div:

.pai{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width:200px;
}

But the daughter div is small enough to fit more than two inside the father div. Is there any way to leave only two per line inside the father div?

Example:

.pai{
width:280px;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
background:#ccc;
}
.filha{
  height:40px;
  width:75px;
  border:1px solid red;
}
<div class="pai">
  <div class="filha">
    
  </div>
  
  <div class="filha">
  
  </div>
  
  <div class="filha">
  
  </div>
  
  <div class="filha">
  
  </div>
  
  <div class="filha">
  
  </div>
</div>

1 answer

1

Unfortunately there is no way, the only solution (keeping the flexbox), is to add one container every 2 div s daughters same...

.pai{
width:280px;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
background:#ccc;
}
.filha{
  height:40px;
  width:75px;
  border:1px solid red;
}
<div class="pai">

  <div>
    <div class="filha"></div>

    <div class="filha"></div>
  </div>

  <div>
    <div class="filha"></div>

    <div class="filha"></div>
  </div>
  
</div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.