Question

我的flexbox有问题。当我使用flex创建相等的列并且某些列具有更大的高度时，带图像的子div将获得一些空白区域，我不知道它来自何处。

从我的代码中可以看出.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;
}

Answer 1

弹性容器的初始设置为GitHub's tutorial。

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

由于您的容器为flex-direction: row并且您已启用flex-wrap: wrap，因此align-content属性会垂直分配包装的项目（沿align-content: stretch）。

使用stretch默认值时，红色背景的div相对于其兄弟姐妹正在扩展，以便填充容器高度。（如果您为所有弹性项目添加背景颜色，您会注意到它们一起填充容器。）

相反，请使用align-content: flex-start或space-between。

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

要解决该问题，我建议您将容器flex-direction切换为column并将margin-top: auto应用于.bottom。更多细节：

Answer 2

在样式.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;
}

Flexbox等高度空白问题

2 个答案: