使元素成组包装，而不是一一包装

Question

我有六个固定大小的内联元素，并希望将它们包装起来，以便每一行具有相同数量的元素。因此，对于宽容器，将有1行包含6列/元素。随着容器的缩小，它将变为2x3，然后是3x2，最后是1x6。

我的直觉是我应该使用flexbox，但是我无法弄清楚如何阻止它一次包装一个元素，这给了我这样的情况，第一行有5个元素，第二行有1个元素。

.box {
  display: flex;
  flex-wrap: wrap;
}

.box div {
  background-color: yellow;
  width: 50px;
  height: 50px;
  margin: 5px;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

https://jsfiddle.net/59wgsk2s/1/

Answer 1

由于您的物品尺寸固定，因此将它们成对或更大的倍数包装有点棘手。

让多个项目进行换行的简单方法是以百分比形式设置其长度。然后，使用媒体查询，可以通过调整百分比来控制每行的项目数。

在具有六个项目（例如您的布局）的布局中，桌面视图的宽度可以设置为 16%。

[ 16% ] [ 16% ] [ 16% ] [ 16% ] [ 16% ] [ 16% ] 

然后，对于笔记本电脑视图，可以启动媒体查询，将宽度更改为 33%：

[ 33% ] [ 33% ] [ 33% ]
[ 33% ] [ 33% ] [ 33% ]

平板电脑视图的想法相同：

[ 50% ] [ 50% ]
[ 50% ] [ 50% ]
[ 50% ] [ 50% ]

移动视图也是如此：

[ 100% ]
[ 100% ]
[ 100% ]
[ 100% ]
[ 100% ]
[ 100% ]

这是一个例子：

jsFiddle

[ 16% ] [ 16% ] [ 16% ] [ 16% ] [ 16% ] [ 16% ] 

[ 33% ] [ 33% ] [ 33% ]
[ 33% ] [ 33% ] [ 33% ]

当然，上面的演示的问题与您的问题相关，是项目没有固定的宽度。作为百分比，它们是灵活的。

因此，让我们尝试相反的方法：我们不调整项目的大小，而是调整容器的大小。通过缩小容器（使用媒体查询），我们可以控制包装行为并保持每个项目的固定宽度大小：

jsFiddle

[ 50% ] [ 50% ]
[ 50% ] [ 50% ]
[ 50% ] [ 50% ]

[ 100% ]
[ 100% ]
[ 100% ]
[ 100% ]
[ 100% ]
[ 100% ]

因此，如果您可以在物品上使用灵活的长度，或者缩小容器的宽度，那么您的问题就可以解决。但是，如果两者都不可行，那么这里有一个使用 CSS 网格布局的干净而简单的解决方案。

jsFiddle

.box {
  display: flex;
  flex-wrap: wrap;
}

.box div {
  flex: 1 0 15%;
  height: 50px;
  margin: 5px;
  background-color: yellow;
  border: 1px solid gray;
}

@media ( max-width: 800px) {
  .box div {
    flex-basis: 30%;
  }
}

@media ( max-width: 600px) {
  .box div {
    flex-basis: 40%;
  }
}

@media ( max-width: 400px) {
  .box div {
    flex-basis: 100%;
    margin: 0 0 5px 0;
  }
}

* {
  box-sizing: border-box;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

Answer 2

如果您的容器宽度未知，也许您可​​以使用一些技巧。

在这里，我插入一个伪元素以强制在正确的尺寸处中断。

你所需要的只是第三个和第四个元素之间的强制中断，其他中断是自然的

我使用 2 个伪变量强制中断，第一个伪变量强制中断，第二个伪变量有足够的边距使它们在最终布局中消失

为了使代码片段易于理解，我将伪值的高度设置为非零值。在生产中，将其设置为零。

.box {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  border: solid 1px black;
}

.box div {
  background-color: lightgreen;
  width: 50px;
  height: 50px;
  margin: 5px;
}

.box:before {
  content: "";
  width: calc(50% - 20px);
  height: 2px;
  background-color: red;
  order: 1;
}
.box:after {
  content: "";
  width: 0px;
  margin-left: calc(-50% + 20px);
  height: 2px;
  background-color: red;
  order: 1;
}

.box div:nth-child(n + 4) {
  order: 2;
}

#box6 {
  width: 370px;
}
#box5 {
  width: 310px;
}
#box4 {
  width: 250px;
}
#box3 {
  width: 190px;
}
#box2 {
  width: 130px;
}
#box1 {
  width: 70px;
}

<div class="box" id="box6">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>
<div class="box" id="box5">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>
<div class="box" id="box4">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>
<div class="box" id="box3">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>
<div class="box" id="box2">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>
<div class="box" id="box1">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>