css - 使元素成组包装，而不是一个接一个

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

因为您的元素是固定大小的，所以让它们成对包装或更大的倍数有点棘手。

让多个元素包装起来的简单方法是以百分比设置它们的长度。然后，使用媒体查询，可以通过调整百分比来控制每行的元素数。

在一个布局中，假设有六个元素(比如您的布局)，桌面 View 的宽度可以设置为 16%。

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

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

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

平板电脑 View 的相同想法:

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

同样适用于移动 View :

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

这是一个例子:

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>

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

那么让我们尝试相反的方法:调整容器的大小而不是调整元素的大小。通过缩小容器(使用媒体查询)，我们可以控制包装行为并保持每个元素的固定宽度大小:

jsFiddle

.box {
  display: flex;
  flex-wrap: wrap;
  width: 360px;
  background-color: lightgreen;
}

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

@media ( max-width: 800px) {
  .box {
    width: 180px;
  }
}

@media ( max-width: 600px) {
  .box {
    width: 120px;
  }
}

@media ( max-width: 400px) {
  .box {
    width: 60px;
  }
}

* {
  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>

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

jsFiddle

.box {
  display: grid;
  grid-template-columns: repeat(6, 50px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

@media ( max-width: 800px) {
  .box {
    grid-template-columns: repeat(3, 50px);
  }
}

@media ( max-width: 600px) {
  .box {
    grid-template-columns: 50px 50px;
  }
}

@media ( max-width: 400px) {
  .box {
    grid-template-columns: 50px;
  }
}

.box div {
  background-color: yellow;
  border: 1px solid gray;
}

* {
  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>