css - 当每一篇文章(高度适合内容)开始一个接一个时，我如何构建一个容器

Question

很难解释(也许是因为我的英语)我想做什么但喜欢标题 - 我想在每篇文章的高度适合内容并且文章紧接着另一篇文章开始(垂直)时做容器。

例子如下: http://herballeaf.eu/herbal-blog/

是否可以使用 flexbox 来实现？

Answer 1

很难确切地知道您的意思，但我猜您指的是想要在页面下方显示 3 个不同的列。为此，我将使用一个带有 flex 显示的父容器，类似地，为父容器的子容器使用三个 div，它们都具有 flex 显示，但它们没有行方向，而是有列(所以它们向下)。确保父 div(s) 有足够的高度和宽度来包含它们:)如果您希望它们“紧接着另一个开始”，那么您可能需要更改边距 :)

.parentContainer{
display: flex;
flex-direction: row;
width: auto; /*be sure that the width is wide enough to contain all three child divs*/
}
.containerOne .containerTwo .containerThree{
display: flex;
flex-direction: column;
}

希望这就是您要找的东西 :) 我在黑暗中尝试了这个，如果有误，我们深表歉意