Flexbox 拼贴网格布局答案

【问题标题】：Flexbox collage grid layoutFlexbox 拼贴网格布局
【发布时间】：2016-11-05 06:01:41
【问题描述】：

是否可以在没有 flexbox 属性的情况下使用纯 css 制作此布局？我尝试为 VC 滑块创建照片库拼贴。是否可以在这里使用网格属性？我使用嵌套 flexbox，最佳实践是什么？ flexbox gallery collage

<div class="contaner">
<div class="item">
<img    src="http://www.telegraph.co.uk/content/dam/pets/2016/05/31/66900964_AR6KDA-CAT-BIRD-PETS-large_trans++XgrBd0P19THPvf9738yRPd-JR69WJ8Rdth_SfFJ_dbY.jpg" alt="" />
 </div>
  <div class="item item-flex">
<img class="item-flex-img-big" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" />
<img class="item-flex-img" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" />
 </div>
 <div class="item item-flex">
   <img class="item-flex-img" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" />
   <img class="item-flex-img-big" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" />

  </div>

<style>
img {
 width: 100%;
 max-width: 100%;
 object-fit: cover;
 object-position:50% 50%;
 height: 100%;
}

.contaner {
  display: flex;
.item {
 flex: 1 1 100%;
}
.item + .item {
  padding-left: 10px;
}
.item-flex {
 display: flex;
 flex-direction: column;
}
.item-flex {
 img + img {
   margin-top:10px;
 }
}
.item-flex-img{
 height: 40%;

}
 .item-flex-img-big{
  height: 60%;

}
}
</style>

【问题讨论】：

标签： html css grid flexbox

【解决方案1】：

您可以查看列 CSS。

.contaner {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-rule-width: 5px;
  -moz-column-rule-width: 5px;
  column-rule-width: 5px;
  height: 600px;
  width: 1200px;
  padding: 15px 15px 0;
  overflow: hidden;
}
span {
  display: block;
  overflow: hidden;
  height: calc(40% - 15px);
  min-width: 100%;
  margin: 0 0 15px;
}
span:nth-child(1) {
  height: calc(100% - 15px);
}
span img {
 width: 100%;
 object-fit: cover;
 object-position:50% 50%;
 height: 100%;
}
span:nth-child(2),
span:nth-child(5) {
  height: calc(60% - 15px);
}
span:nth-child(1) img {
  height: 100%;
  margin: 0;
  object-position:10% 50%;
}
/* snippet purpose */

body {
  margin: 0;
}
.contaner {
  box-sizing: border-box;
  height: 100vh;
  width: 200vh;
}

<div class="contaner">
  <span><img src="http://www.telegraph.co.uk/content/dam/pets/2016/05/31/66900964_AR6KDA-CAT-BIRD-PETS-large_trans++XgrBd0P19THPvf9738yRPd-JR69WJ8Rdth_SfFJ_dbY.jpg" alt="" /></span>
  <span><img  src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /></span>
  <span><img  src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /></span>
  <span><img  src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /></span>
  <span><img  src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" alt="" /></span>

</div>

注意：每个图像都包含在一个跨度中所有兄弟姐妹（可以是图形或任何其他标签）

【讨论】：