具有挑战性的布局——如何实现？答案

【问题标题】：Challenging layout - how to achieve?具有挑战性的布局——如何实现？
【发布时间】：2016-02-18 10:23:38
【问题描述】：

我正在尝试创建附加布局，但遇到了困难。

基于此布局：

Layout example from not-studio.com

该示例的主要内容是，他们的所有图像都是按照精确的规格创建的，以使网格的大小交替变化。

我希望能够：
• 使用任何尺寸的图像并将其裁剪到包含框并隐藏溢出
• 缩小浏览器时，让包含框的宽度/高度和图像按比例缩放。
• 尽可能不要依赖任何插件。

到目前为止我尝试过的是：

• 弹性盒
• 花车
• 上边距为负的最大/最小高度
• 在example 中使用填充和绝对定位

对如何以最简洁的方式实现这一目标有任何想法吗？

【问题讨论】：

stackoverflow.com/questions/8470070/…
css网格怎么样？ w3.org/TR/2015/WD-css-grid-1-20150917
为什么不能使用 flexbox？那就是你想要的东西。发布您迄今为止使用 flexbox 尝试过的代码以及不起作用的代码。 jsFiddle 会很好
我正在浏览我的一些较旧的答案，并找到了这个。我的回答怎么不能解决你的问题？

标签： css layout flexbox

【解决方案1】：

这是你的一个开始。现在您可以用图像填充每个项目，添加文本等。

html, body {
  margin: 0;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  min-height: 500px;
}

.container .item {
  height: calc(16.6% - 20px);
  background: #eee;
  margin: 10px;
  display: flex;
  flex-direction: column;
}

.container .item:nth-child(12),
.container .item:nth-child(10),
.container .item:nth-child(7),
.container .item:nth-child(5),
.container .item:nth-child(4),
.container .item:nth-child(2) {
  height: calc(33.3% - 20px);
}

.container .item .img {
  flex: 1;
}

.container .item .txt {
  flex: 0;
  background: #fff;
  color: #900;
}

<div class="container">
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
</div>

【讨论】：