垂直不水平的砌体布局

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＃砖石IMG - 你可以用宽度和/或高度也，希望帮助:)