使弹性行充当列以保留时间线

Question

首先：谢谢你的时间！
我想用Flex拳击做一个博客。我一直在寻找几个地方（here，here，here，here，here和here），但我不能得到我想要的“博客”效果。我希望制作一个可以用flex-direction: column;制作的两列布局 不幸的是，这将导致最新帖子的列中有一列较旧的帖子。如果我不想保持相关博客的时间线，我觉得我需要将flex-direction: row;与flex-wrap: wrap;结合使用。
此选项适用于相同高度的帖子，但在高度变化时会导致空间丢失。

在左侧是我当前的结果，在右侧是所需的结果：

我意识到这显然是一个需要两列而不是行的网格。但有没有办法让align-items和align-content属性在基于行的Flex框（并且没有Javascript）上实现这种布局？或者，如果不可能像this那样建议，是否有使用列的解决方法但保持时间线相关？我应该使用除Flex以外的其他东西吗？

这是我目前的情况尽可能简单：

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.container div{
  border: 1px solid black;
  width: 40%;
}

<div class="container">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
    <br/>
    <br/>
    <br/>
  </div>
  <div>
    4
  </div>
  <div>
    5
  </div>
</div>

谢谢你，
马克西姆

Answer 1

您的目标是 Masonry effect 。

可以使用 CSS3 columns ， Flex-box 或应用 custom plugin. 来完成

然而，使用CSS列存在一些问题，因为它们是一个相对较新的规范，可能会给访问者带来一些不受欢迎的行为。

您可以在 Can I use chart for CSS3 columns 中查看我所指的内容。

我的建议是前往Flexbox变体，这将是使用 the right prefixes 的问题较少的方法。

查看我发布的 codepen 。

只需更改列的宽度并立即使用它

即可

div#masonry img {  // and the img here will be your post
  width: 33.3%; // to > 49.5% or whatever suits your needs
  transition: .8s opacity;
} 

或者你可以在最常用的 JS Masonry plugin 的网站上挖掘，你需要做的只是围绕它的工作。