角材Flexbox - 如何在包裝行之間添加邊距？

Question

我正在使用Angular Material及其flexbox功能。

我現在遇到一個問題，在我看來應該很簡單，但我有問題。

我創建了this用於演示我的問題。

所以我有一個排，超過該行的100％，並已裹啓用的項目，所以我得到的物品的兩排沒有利潤，這樣的：

<div class="row" layout="row" layout-wrap="wrap"> 
    <div flex="50" class="item1"></div> 
    <div flex="50" class="item2"></div> 
    <div flex="50" class="item3"></div> 
    <div flex="50" class="item4"></div> 
</div> 

而且我使用這個CSS ：

.row { 
    background-color: grey; 
    padding: 10px; 
} 

.item1 { 
    height: 200px; 
    background-color: blue; 
} 

.item2 { 
    background-color: red; 
} 

.item3 { 
    backgronud-color: black; 
    height: 100px; 
} 

.item4 { 
    background-color: green; 
} 

我想在他們周圍的每個項目周圍都有一個均勻的邊距（比如說10px）。

我試過設置邊界像正常，但然後項目不能正確包裝，並給我每行只有一個項目。我仍然想要每行2個項目。

當我向項目添加子div並設置margin: 10px;時，我成功獲得了左右邊距，但上下邊距完全被忽略。

那麼，我怎樣才能得到一個行（垂直）每個包裝行之間10px的餘量包裝？

Answer 1

你可以嘗試重寫此角指令的一部分：

flex="50" (which computes to flex: 1 1 50% [flex-grow, flex-shrink, flex-basis]) 

這個CSS：

.row > div { 
    flex-basis: calc(50% - 20px) !important; /* width less horizontal margins */ 
    margin: 10px; 
} 

Revised Codepen

瞭解更多關於CSS calc功能。