垂直而不是水平的砌体布局

Question

我发现了一些非常简单的砌体布局，现在问题是它在水平方向上显示，我希望它在垂直方向上显示。试图改变砌体高度但仍然水平显示不太确定如何

显示：弹性

与其他 flex 属性一起使用。

这就是我想要实现的layout

小提琴是here

HTML：

<div id="masonry">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/9.jpg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/7.jpg">
</div>

CSS：

body { 
  margin: 0; background: #131212;  
  width: 100vw
} 
div#masonry { 
  display: flex; 
  flex-direction: column; 
  flex-wrap: wrap;
  height: 100vw;
  font-size: 0;  
}
div#masonry img {  
  width: 50%;
  transition: .8s opacity;
} 

div#masonry:hover img { opacity: 0.3; }
div#masonry:hover img:hover { opacity: 1; } 

Answer 1

->some guide<-
flex-direction: row | row-reverse | column | column-reverse;
在里面： div#masonry img - 您也可以使用宽度和/或 高度，希望对您有所帮助:)