html - 使 flex 行充当列以保留时间轴

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 ，您所需要做的就是全神贯注于它的工作。