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

Posted 2023-03-06

【中文标题】使元素成组包装，而不是一个一个

【英文标题】：Make elements wrap in groups, not one by one

【发布时间】：2018-10-22 22:13:53

【问题描述】：

我有六个内联、固定大小的元素，我想将它们包装起来，使每一行都有相同数量的元素。因此，对于一个宽容器，将有 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/

【问题讨论】：

解决方法是：媒体查询

【参考方案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

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

【参考方案2】：

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

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

您只需要在第 3 个和第 4 个元素之间强制中断，其他中断自然

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

为了让 sn-p 易于理解，我将伪对象的高度设置为非零值。在生产中，将其设置为零。

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