如何制作包含不同尺寸项目的图库

Question

我想做这样的事情：

如果可能的话，我想用最干净，语义和响应的布局来做到这一点。

当我说清洁时，我指的是这样的东西。

<div class="gallery">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>etc...</div>
</div>

使用CSS对齐，重新缩放和重新定位项目。

PD1：这只能用html + css吗？

PD2：这可以用flexbox吗？

Answer 1

像这样的东西可以使流程垂直并允许包装。

*{box-sizing:border-box}
.gallery{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  height:300px;
  width:100%;
}
.gallery > *{
  flex:0 0 1;
  height:50%;
  background:teal;
  border:1px solid #000;
  color:#fff;
  padding:20px;
}
.gallery > :nth-child(5n){
  height:100%;
}

<div class="gallery">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
</div>