Html Flexbox等高空白问题

我对flexbox有问题。当我用flex创建相等的列时，有些列的高度更大，那么带有image的child div将获得一些空白，我不知道这是从哪里来的

从我的代码中可以看出，

.card thumb

中的红色背景高度不正确。那么如何解决这个问题呢

这是我的钢笔：

---

在style

.card

中更改

显示：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;
}

flex容器的初始设置为

这意味着flex容器中的多行将展开以填充容器的大小

因为您的容器是
flex-direction:row
，并且您已经启用了
flex-wrap:wrap
，所以
align-content
属性垂直（沿路径）分发包装的项目

使用
拉伸
默认值，红色背景的div将相对于其同级展开，以填充容器高度。（如果为所有flex项添加背景色，您会注意到它们一起填充容器。）

相反，请使用
align content:flex start
或
之间的空格


您将面临的下一个问题是
.bottom
不再尊重
align self:flex end

为了解决这个问题，我建议将容器的
弹性方向
切换到
列
，并将
边距顶部：自动
应用到
底部
。更多详情：





这不好，因为卡必须有显示器：flex；使用align-self的一些项目。嘿，谢谢你的解释。我在
.card
上使用了flex direction:column wrap
和
margin top:auto
在
.bottom
div上，正如您所说，这很好，所以我将坚持使用此解决方案。
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;
}