Wrap items for last row in flex layout with space between alignment

Question

Is there any way to have wraped items in rows with space between alignment, where last row dont have big gap?

<div fxFlex="row wrap" fxLayoutAlign="space-around">
    <my-item *ngFor="let item of items"></my-item>
</div>

Actual behaviour:

I need same "space-between" in last row compared to other rows.

Answer 1

The quickest way to get what you're looking for is to add an empty element after the last visible element:

<!-- your last 3 boxes -->
<div class="gray-box">
  (your content)
</div>

<div class="gray-box">
  (your content)
</div>

<div class="gray-box">
  (your content)
</div>

<!-- an empty box - make sure .transparent has opacity: 0-->
<div class="gray-box transparent"></div>

If you're okay with not using flexbox, display: grid is more along the lines of what you're looking for, where you can define grid sizes more strictly:

display: grid;
grid-template-columns: repeat(4, 25%);
grid-gap: /* gap between your items */

Answer 2

You can use "filler" elements. You need 3 elements at the end of your list which are no visible. Everytime when your row breaks the filler helping to keep the right sizes and spaces.

 const addbutton = document.getElementsByClassName('add'); // referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); const addEl = () => { const newli = document.createElement('li'); newli.textContent = 'new flex child'; const pos = document.querySelector('li.filler'); pos.parentNode.insertBefore(newli, pos.previousElementSibling.nextSibling); } addbutton[0].addEventListener('click', addEl); 

 body { display: flex; } ul { display: flex; flex-flow: row wrap; justify-content: space-between; padding: 0; flex: 1; } ul>li { flex: 0 1 24%; background: #ccc; display: block; height: 40px; margin-bottom: 20px; } ul>li.filler { height: 0; padding: 0; } button { background: #333; color: white; border: none; padding: 5px; flex: 0 0 100px; height: 100px; margin: 10px; } 

 <button class="add">click here to add childs</button> <ul> <li>lorem</li> <li>lorem</li> <li>lorem</li> <li>lorem</li> <li>lorem</li> <li>lorem</li> <li class="filler"></li> <li class="filler"></li> <li class="filler"></li> </ul> 

Answer 3

I'm just guessing on your html and css structure here, but I assume you have something like this:

 .wrapper { width: 1000px; display: flex; flex-wrap: wrap; justify-content: space-between; } .item { background: gray; width: 200px; height: 100px; border: 1px solid black; } 

 <div class="wrapper"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> 

You can keep the same spacing around each element by using a simple margin and setting the justify-content attribute to either center or flex-start based on your needs.

 .wrapper { width: 1000px; display: flex; flex-wrap: wrap; justify-content: flex-start; } .item { background: gray; width: 200px; height: 100px; border: 1px solid black; margin: 0 20px; } 

 <div class="wrapper"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>