Question

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

display：flex

与其他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 - 你也可以玩宽度和/或高度，希望有所帮助：）

垂直而不是水平的砖石布局

1 个答案: