使用flexbox将flex元素中的元素包装到下一行

Question

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

我不必使用flexbox，但我认为它们可能对这样的东西很有用。但是我无法想出这个。谢谢！

.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

• 删除了两个.product
• 然后将每个缩略图包装在inline-block
中
• inline-blocks左右边距为-2.5px，因此它们在内联时似乎属于同一个容器。
• 外部区块为display:table
• 每个第3个缩略图都有.5em右边距（由LGSon建议）

演示

＆＃13;

＆＃13;

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  border: 0;
}

main {
  display: table;
  table-layout:fixed;
  padding: .5em;
  background: yellow;
}

b {
  display: inline-block;
  padding: 8px;
  margin: 10px -2.5px;
  background: magenta
}

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

main>div>b:nth-of-type(3n) {
  margin-right: .5em
}

＆＃13;

<main>
  <div class="products">

    <b><div class="thumbnail"></div></b>
    <b><div class="thumbnail"></div></b>
    <b><div class="thumbnail"></div></b>
    <b><div class="thumbnail"></div></b>
    <b><div class="thumbnail"></div></b>
    <b><div class="thumbnail"></div></b>
    <b><div class="thumbnail"></div></b>
    <b><div class="thumbnail"></div></b>
    <b><div class="thumbnail"></div></b>

  </div>
</main>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

.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>