css - 使用 flexbox 将 flex 元素内的元素换行到下一行

Question

我有一个包含“产品框”的 flexbox，它们本身包含产品的缩略图。如果产品框在该行的空间不足，有没有办法将缩略图换到下一行？每个产品我可能有 10 多个缩略图，因此如果需要它甚至可能需要运行到下一个两行，但它们仍然应该与产品的重置“内联”而不是换行符他们的开始和结束。

我不必使用 flexboxes，但我认为它们可能对这样的事情有用。但是我无法弄清楚这一点。谢谢!

.products {
  display: flex;
  background: yellow;
}

.product {
  flex: 1;
  margin: 1em;
  background: magenta;
}

.thumbnail {
  display: inline-block;
  margin: 1em;
  width: 100px;
  height: 40px;
  background: blue;
}

<div class="products">
  <div class="product">
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
  </div>
  <div class="product">
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
    <div class="thumbnail"></div>
  </div>
</div>

发生了什么:

我希望发生的事情:

Answer 1

通过一些较小的调整，您可以实现这一目标，其中不对缩略图进行分组并使用包装器来补偿上边距。

.products {
  background: yellow;
}

.wrapper {
  display: inline-flex;          /*  avoid collapsed margin on parent element  */
  flex-wrap: wrap;
  margin-top: -15px;             /*  so margin only affect second row  */
}

.products a {
  padding: 1em;
  margin-top: 15px;
  background: magenta;
}

.products a:nth-child(3n) {      /*  target every 3rd element with a right margin  */
  margin-right: 15px;
}

.thumbnail {
  width: 100px;
  height: 40px;
  background: blue;
  color: white;
}

<div class="products">
  <div class="wrapper">
    <a href="#"><div class="thumbnail">1</div></a>
    <a href="#"><div class="thumbnail">2</div></a>
    <a href="#"><div class="thumbnail">3</div></a>
    <a href="#"><div class="thumbnail">4</div></a>
    <a href="#"><div class="thumbnail">5</div></a>
    <a href="#"><div class="thumbnail">6</div></a>
  </div>
</div>

---

正如您在评论中提到的，缩略图的数量是任意的，使用 nth-child 在要作为一个组查看的元素之间创建间隙可能不切实际。

基于这一事实，并假设您动态生成这些缩略图，您可以使用空格元素，或者像下面那样，添加内联边距。

.products {
  background: yellow;
}

.wrapper {
  display: inline-flex;          /*  avoid collapsed margin on parent element  */
  flex-wrap: wrap;
  margin-top: -15px;             /*  so margin only affect second row  */
}

.products a {
  padding: 1em;
  margin-top: 15px;
  background: magenta;
}

.thumbnail {
  width: 100px;
  height: 40px;
  background: blue;
  color: white;
}

<div class="products">
  <div class="wrapper">
    <a href="#"><div class="thumbnail">1</div></a>
    <a href="#"><div class="thumbnail">2</div></a>
    <a style="margin-right: 15px" href="#"><div class="thumbnail">3</div></a>
    <a href="#"><div class="thumbnail">4</div></a>
    <a href="#"><div class="thumbnail">5</div></a>
    <a style="margin-right: 15px" href="#"><div class="thumbnail">6</div></a>
  </div>
</div>