Flexbox: Can you control the amount of items aligned with the "space-between"?

Question

Flexbox: Can you control the amount of items aligned with the "space-between"?

Navigation

#1 by (1 votes)

0

I have the following case, a parent div with 5 child divs, and I need them to align two by two, using the space-between in the parent div:

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

However the daughter div is small enough to fit more than two inside the parent div. Is there any way to leave only two per line within the parent 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>

css3 flexbox

asked by anonymous 24.08.2017 / 19:07

1 answer

Is the order of evaluation of alternatives in a regular expression always taken into account? javascript - Ignore white space in the string [closed]

score 1 · Answer 1

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

.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>