Flexbox等高空白問題

我有一個flexbox的問題。當我使用flex創建相等的列並且某些列具有較大的高度時，那麼具有圖像的子div將獲得一些空白區域，我不知道這是從哪裏來的。Flexbox等高空白問題

正如你可以從我的代碼看到.card-thumb的紅色背景有錯誤的高度。那麼如何解決這個問題？

這裏是我的筆：http://codepen.io/woosaj/pen/bZjyRP

.container { 
    max-width: 1000px; 
    margin: 0 auto; 
    display: flex; 
    flex-flow: row wrap; 
    background: rgba(2552,255,255,.1) 
} 

.column { 
    display: flex; 
    flex: 0 0 33.33333%; 
    padding-left: 0.3125rem; 
    padding-right: 0.3125rem; 
    max-width: 33.33333%; 

} 

.card { 
    background: #fff; 
    display: flex; 
    flex-flow: row wrap; 
    .card-thumb { 
     width: 100%; 
     background: red; 
    } 

} 

img { 
    max-width: 100%; 
    display: block; 
}

來源

2016-08-01 MordFustang

柔性容器的初始設置是align-content: stretch。

這意味着flex容器中的多行將展開以填充容器的大小。

因爲你的容器是flex-direction: row和已啓用flex-wrap: wrap，該align-content財產垂直分佈的包裹物品（沿cross-axis）。

默認情況下，stretch紅色背景的div相對於它的同胞正在擴展，以填充容器高度。（如果爲所有彈性物品添加背景色，您會注意到它們一起填充容器。）

而是使用align-content: flex-start或space-between。

下一個問題你要面對的是.bottom不再尊重align-self: flex-end。

要解決這個問題，我建議將容器的flex-direction切換爲column並將margin-top: auto應用到.bottom。更多細節：

來源

2016-08-01 15:23:13

嘿，謝謝你的解釋。我在'.bottom' div上使用'.card'' flex-direction：column wrap'和'margin-top：auto'，這個工作正常，所以我會堅持使用這個解決方案。 – MordFustang

在風格.card改變display:flex;到flex:1;。這會幫助你。

body { 
    background: #000; 
} 

.container { 
    max-width: 1000px; 
    margin: 0 auto; 
    display: flex; 
    flex-flow: row wrap; 
    background: rgba(2552,255,255,.1) 
} 

.column { 
    display: flex; 
    flex: 0 0 33.33333%; 
    padding-left: 0.3125rem; 
    padding-right: 0.3125rem; 
    max-width: 33.33333%; 

} 

.card { 
    background: #fff; 
    flex:1; 
    flex-flow: row wrap; 
    .card-thumb { 
     width: 100%; 
     background: red; 
    } 

} 

img { 
    max-width: 100%; 
    display: block; 
}

來源

2016-08-01 09:33:58 Nehemiah

這是不好的，監守.card必須顯示：彎曲;裏面的一些項目使用align-self。 – MordFustang

Flexbox等高空白問題

回答

相關問題