缩小图像以适应带有换行的 flexbox

Question

我希望将任意数量的图像缩小以适合固定宽度的 div。 似乎 flexbox 很适合这个目的，但我似乎无法让它用于包装多行。

如果我将flex-flow 设置为row wrap 并将flex 设置为1 1 auto，则图像太大。

.container {
  display: flex;
  flex-flow: row wrap;
  border: 1px solid black;
  width: 300px;
  height: 300px;
}

.image {
  flex: 1 1 auto;
}

img {
  max-width: 100%;
}

<div class="container">
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
</div>

如果我将 flex-flow 设置为 row 或 flex 设置为 1 1 0，则图像不会换行：

.container {
  display: flex;
  flex-flow: row wrap;
  border: 1px solid black;
  width: 300px;
  height: 300px;
}

.image {
  flex: 1 1 0;
}

img {
  max-width: 100%;
}

<div class="container">
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
</div>

我怎样才能使图像扩展得足够大，以尽可能多地包裹以填充 div，但又不会超出 div？

Answer 1

如果我将flex-flow 设置为row wrap 并将flex 设置为1 1 auto，则图像太大。

使用flex-basis: auto，您的项目将采用其内容（在本例中为图像）的大小。这就是您在第一个演示中得到的：图像的固有宽度。

如果我将 flex-flow 设置为 row 或 flex 设置为 1 1 0，则图像不会换成多行。

使用flex-basis: 0，您的项目将忽略内容大小并在项目之间平均分配行中的所有空间。这就是您的第二个演示中发生的情况：它正在创建三个等宽的项目。结果，没有理由换行。

要控制弹性项目的大小，您需要定义它们的flex-basis。这是一个粗略的草图：

.container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start; /* pack wrapping lines to the top */
  border: 1px solid black;
  width: 300px;
  height: 300px;
}

.image {
  flex: 0 0 30%;
  margin: 5px;
}

img {
  max-width: 100%;
}

<div class="container">
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>  
</div>

Answer 2

只是为了好玩。

var container1 = document.querySelector('.container1'),
  container2 = document.querySelector('.container2'),
  img = container2.querySelectorAll('.container2 img'),
  width = 50,
  stop = false;

expand();

function expand() {
  for (var i = 0; i < img.length; i++) {
    img[i].style.width = width + 'px';
  }
  if (stop) return;
  if (container2.clientHeight < container1.clientHeight) {
    width++;
    setTimeout(function() {
      expand()
    }, 10);
  } else {
    width--;
    stop = true;
    expand();
  }
}

.container1 {
  border: 1px solid black;
  height: 300px;
  width: 300px;
}

.container2 {
  font-size: 0;
}

<div class="container1">
  <div class="container2">
    <img src="http://www.placebacon.net/400/300">
    <img src="http://www.placebacon.net/400/300">
    <img src="http://www.placebacon.net/400/300">
  </div>
</div>