垂直不水平的砌體佈局

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 - 你可以用寬度和/或高度也，希望幫助:)