給包裝的柔性箱項目垂直間距

我最近一直在第一次使用Flexbox，一般來說，這絕對是驚人的。我最近遇到了一個問題，但我似乎無法給出包裝任何垂直間距的Flex項目。給包裝的柔性箱項目垂直間距

我已經嘗試使用：

align-content: space-between;

，但是這似乎並沒有做任何事情。從閱讀我做的，這似乎只工作，如果我的柔性容器比包含的元素高（是這樣嗎？）如果是這樣，那麼我將不必爲我的柔性容器設置高度，這似乎打敗了使用flexbox的目的？

我能想到的唯一的辦法，使這項工作將是給下邊距中的元素，但這又似乎擊敗目的。

希望我失去了相當明顯的東西 - 這裏有一個codepen鏈接：http://codepen.io/lordchancellor/pen/pgMEPz

而且，這裏是我的代碼：

HTML：

<div class="container"> 
    <div class="col-sm-12"> 
    <h1>Flexbox Wrapping</h1> 

    <div class="flexContainer"> 
     <div class="flexLabel">This is a flex label</div> 

     <a class="btn btn-primary">Button 1</a> 
     <a class="btn btn-warning">Button 2</a> 
     <a class="btn btn-success">Button 3</a> 
    </div> 
    </div> 
</div>

CSS：

.flexContainer { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    align-content: space-between; 
    justify-content: center; 
} 
.flexContainer .flexLabel { 
    flex-basis: 150px; 
    flex-shrink: 0; 
}

編輯 - 在這裏添加一些細節，因爲我不知道我是p充分利用它。

在我的大型項目中，我有一些使用flexbox排成一行的塊級元素。但是，由於用戶可能會減小屏幕寬度，因此需要有一些響應能力。在這一點上，我希望我的元素開始堆疊（因此包裝）。然而，當元素開始疊加時，它們都垂直接觸，我想在那裏間隔。

它開始看起來像頂部和底部邊緣可能是解決這個問題的唯一辦法 - 但我不知道是否有一個Flexbox的中心的方式來實現這一目標。

來源

2016-02-23 lordchancellor

如果您通過應用寬度強制包裝，則可以像平常一樣使用邊距而不設置高度。

.flexContainer { 
 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    background: pink; 
 
    width: 150px; 
 
} 
 
.flexContainer > * { 
 
    margin: 1em 0; 
 
} 
 
.flexContainer .flexLabel { 
 
    flex-basis: 150px; 
 
    flex-shrink: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="col-sm-12"> 
 
    <h1>Flexbox Wrapping</h1> 
 

 
    <div class="flexContainer"> 
 

 
     <div class="flexLabel">This is a flex label</div> 
 

 
     <a class="btn btn-primary">Button 1</a> 
 
     <a class="btn btn-warning">Button 2</a> 
 
     <a class="btn btn-success">Button 3</a> 
 
    </div> 
 

 
    </div> 
 
</div>

來源

2016-02-23 13:22:00

沒有包裝似乎是一個錯字，因爲它被覆蓋了兩行後用'flex-wrap：wrap;' – tenor528

是的，你是絕對正確的，nowrap是一個愚蠢的錯字，因爲我從我的大項目中解除了這段代碼片段！ – lordchancellor

這個問題現在已經被編輯過了，但事實依然是項目沒有包裝，因爲父項足夠寬以適應它們。 –

那是因爲你沒有在你的Flex內容的高度爲它計算之間的空間，所以此刻的，柔性容器儘可能小。增加一個高度，它應該工作。

來源

2016-02-23 13:19:49 tenor528

謝謝 - 我一直希望避免在元素上設置高度，但也許這不是正確的思維方式！ – lordchancellor

也許你正在尋找'flex-direction：column'？不確定。 – tenor528

我也有類似的問題，我用下面的破解來解決這個問題。

/* add a negative top-margin to the flex container */ 
.flexContainer { 
     /* ... your existing flex container styles here */ 
    margin: -10px 0 0 0; 
} 
    /* add a corresponding positive top margin to all flex items (all direct children of the flex container) */ 
.flexContainer > * { 
    margin-top: 10px; 
}

對於柔性物品的頂行的負和正邊緣抵消，對於後續的行它增加了行之間的裕度（在這種情況下的行之間10px）。

它不夠優雅，但它完成了工作。

來源

2017-06-13 14:01:21 JRulle

爲什麼負利潤率被視爲黑客？ – Casey

另一個哈克的解決辦法是賦予該項目一個底部邊框：

border-bottom: 10px solid gray;

顏色應該是你的背景顏色明顯。

來源

2017-11-02 14:26:55 Zohar

適用於高度爲100％ – Zohar

給包裝的柔性箱項目垂直間距

回答

相關問題