如何使 flexbox 网格图像具有响应性答案

【问题标题】：How to make flexbox grid images responsive如何使 flexbox 网格图像具有响应性
【发布时间】：2016-07-11 09:03:43
【问题描述】：

我正在尝试使用具有不同宽度和高度的图像创建一个 flexbox 网格，我希望在不同的屏幕尺寸上显示时表现出响应性。我现在有网格，但我不知道如何让它响应。我试图将引导程序中的响应类应用于当前布局，但没有任何运气。我也尝试过砖石，但它并没有解决我的问题。

所以问题是，我该如何做出响应，这是否是正确的方法？

HTML

<div class="flex_container">
  <div class="flex_group__1">
    <img src="holder.js/460x670" />
    <img src="holder.js/460x408" />
  </div>
  <div class="flex_group__2">
    <img src="holder.js/645x813">
    <img src="holder.js/645x265">
  </div>
  <div class="flex_group__3">
    <img src="holder.js/808x330"/>
    <div class="flex_group__3_inner_bottom">
      <img src="holder.js/452x748"/>
      <img src="holder.js/356x748"/>
    </div>
  </div>
</div>

CSS

.flex_group__1, .flex_group__2, .flex_group__3, .flex_group__3_inner_bottom, .flex_container {
  display: flex;
}

.flex_container {
  flex-direction: row;
}

.flex_group__3 {
  flex-direction: row wrap;
  justify-content: flex-end;
}

.flex_group__1, .flex_group__2, .flex_group__3 {
  flex-direction: column;
}

.flex_container * {
  border: 1px solid;
}
img {
  max-width: 100%;
}

【问题讨论】：

我找到了我的另一个样本，看看这个：stackoverflow.com/questions/35465475/…
这适用于我奇怪尺寸的图像吗？
是的，...我决定制作第一个代码库:)，以帮助您入门。

标签： html css twitter-bootstrap flexbox

【解决方案1】：

这是一个布局更接近您要求的版本，并且更容易理解。

这样，您可以在每个图像持有者上设置background-image（就像我在下面的堆栈 sn-p 中所做的那样），或者将img 元素添加到标记中。

Fiddle demo

html, body {
  margin: 0;
}
.wrapper {
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;   /* 16:9 ratio */
  display: block;
  content: ' ';
}
.flex-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 5px;
  display: flex;
}
.flex-container > div {           /*  .flex-col-1, .flex-col-2, .flex-col-3  */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.flex-container > div > div {     /*  .flex-row-1, .flex-row-2    */
  margin: 5px;
  display: flex;
}

.flex-col-1 {
  width: 25%;
}
  .flex-col-1 .flex-row-1 {
    height: 70%;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }
  .flex-col-1 .flex-row-2 {
    height: 30%;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }

.flex-col-2 {
  width: 32.5%;
}
  .flex-col-2 .flex-row-1 {
    height: 80%;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }
  .flex-col-2 .flex-row-2 {
    height: 20%;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }

.flex-col-3 {
  width: 42.5%;
}
  .flex-col-3 .flex-row-1 {
    height: 44%;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }
  .flex-col-3 .flex-row-2 {
    height: 56%;
  }

.flex-col-3-inner {
  flex: 1;
  display: flex;
}
  .flex-col-3-inner .flex-col-1-inner {
    width: 40%;
    margin-right: 5px;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }
  .flex-col-3-inner .flex-col-2-inner {
    width: 60%;
    margin-left: 5px;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }

<div class="wrapper">
  <div class="flex-container">
    <div class="flex-col-1">
      <div class="flex-row-1">
      </div>
      <div class="flex-row-2">
      </div>
    </div>
    <div class="flex-col-2">
      <div class="flex-row-1">
      </div>
      <div class="flex-row-2">
      </div>
    </div>
    <div class="flex-col-3">
      <div class="flex-row-1">
      </div>
      <div class="flex-row-2">
        <div class="flex-col-3-inner">
          <div class="flex-col-1-inner">
          </div>
          <div class="flex-col-2-inner">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

第二个示例，使用img，我也在其中添加了此规则

.flex-container img {
  height: auto;
  width: 100%;
}

如您所见，在这样的布局中，img 元素需要更多单独的触摸才能使它们发挥作用。

html, body {
  margin: 0;
}
.wrapper {
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;   /* 16:9 ratio */
  display: block;
  content: ' ';
}
.flex-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 5px;
  display: flex;
}
.flex-container > div {           /*  .flex-col-1, .flex-col-2, .flex-col-3  */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.flex-container > div > div {     /*  .flex-row-1, .flex-row-2    */
  margin: 5px;
  display: flex;
}

.flex-container img {
  height: auto;
  width: 100%;
}

.flex-col-1 {
  width: 25%;
}
  .flex-col-1 .flex-row-1 {
    height: 70%;
    background: #ddd;
  }
  .flex-col-1 .flex-row-2 {
    height: 30%;
    background: #ddd;
  }

.flex-col-2 {
  width: 32.5%;
}
  .flex-col-2 .flex-row-1 {
    height: 80%;
    background: #ddd;
  }
  .flex-col-2 .flex-row-2 {
    height: 20%;
    background: #ddd;
  }

.flex-col-3 {
  width: 42.5%;
}
  .flex-col-3 .flex-row-1 {
    height: 44%;
    background: #ddd;
  }
  .flex-col-3 .flex-row-2 {
    height: 56%;
  }

.flex-col-3-inner {
  flex: 1;
  display: flex;
}
  .flex-col-3-inner .flex-col-1-inner {
    width: 40%;
    margin-right: 5px;
    background: #ddd;
  }
  .flex-col-3-inner .flex-col-2-inner {
    width: 60%;
    margin-left: 5px;
    background: #ddd;
  }

<div class="wrapper">
  <div class="flex-container">
    <div class="flex-col-1">
      <div class="flex-row-1">
        <img src="https://placeimg.com/400/600/arch" alt="">
      </div>
      <div class="flex-row-2">
        <img src="https://placeimg.com/400/600/arch" alt="">
      </div>
    </div>
    <div class="flex-col-2">
      <div class="flex-row-1">
        <img src="https://placeimg.com/400/600/arch" alt="">
      </div>
      <div class="flex-row-2">
        <img src="https://placeimg.com/400/600/arch" alt="">
      </div>
    </div>
    <div class="flex-col-3">
      <div class="flex-row-1">
        <img src="https://placeimg.com/400/600/arch" alt="">
      </div>
      <div class="flex-row-2">
        <div class="flex-col-3-inner">
          <div class="flex-col-1-inner">
            <img src="https://placeimg.com/400/600/arch" alt="">
          </div>
          <div class="flex-col-2-inner">
            <img src="https://placeimg.com/400/600/arch" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这里还有 2 个变体，一个使用 background-size: contain;

https://jsfiddle.net/LGSon/htjccmfg/1

和另一个background-size: 100% 100%

https://jsfiddle.net/LGSon/htjccmfg/2

【讨论】：

非常棒的例子！这让我意识到下次我应该设计得更简单;-) 除此之外，当我将图像作为添加到弹性框时，其中一些被拉伸了，这是不应该的。这是预期的行为吗？
@JavaCake 谢谢，它是，除非你一个接一个地设置它们。我更新并添加了一个 2:nd 示例 + 一个额外的 CSS 规则，使用它，你会看到会发生什么。可能您需要在每个图像上设置单独的值，因此使用background-image 有一些好处，特别是当您有这样的预定义布局时。
我明白你的意思，因为我偶然发现了与此示例相同的问题。下角的两张图有点“失控”..
@JavaCake Yepp，并且由于每个图像都需要适合特定的纵横比，因此您必须进行设置，否则它们会变形。 background-size: cover 会自动执行此操作并在高度或宽度上剪切图像，因此在使用 img 时需要为每个图像进行设置。
所以我需要计算每个 flex 单元格的像素百分比以使其正常工作？