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等高空白问题

回答

相关问题