在彈性布局中將最后一行的項目包裝在一起，並在對齊之間留有間隔

Question

有什么方法可以將項目包裝在行之間並在對齊之間留有間隔，最后一行沒有大的間隙嗎？

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

實際行為：

與其他行相比，我需要在最后一行中使用相同的“間隔”。

Answer 1

獲得所需內容的最快方法是在最后一個可見元素之后添加一個空元素：

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

如果您不使用flexbox可以，請display: grid更符合您要查找的內容，您可以在其中更嚴格地定義網格大小：

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

Answer 2

您可以使用“填充”元素。 列表末尾需要3個不可見的元素。 每當您的行中斷填充程序時，都有助於保持正確的大小和空間。

 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

我只是在這里猜測您的html和css結構，但是我假設您有這樣的東西：

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

您可以通過使用簡單的邊距並根據需要將justify-content屬性設置為center或flex-start來在每個元素周圍保持相同的間距。

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