如何让flex布局的gallery图片列表中第四张图片切换到新行展示

你可以通过调整flex布局的换行规则，给第四张图片的容器设置整行宽度来实现需求，具体修改如下：

第一步：修正原有CSS错误并调整容器配置 #

你的原有CSS存在语法缺漏（缺少分号），且flex-direction: column会让所有元素纵向排列，不符合多图同行的需求，修改后代码如下：

.gallery-images{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
  margin: 10px;
  width: 500px;
}

第二步：设置图片容器的通用宽度规则 #

要让前3张图片平分一行宽度，给所有.box容器设置适配宽度：

.gallery-images .box {
  flex-basis: calc((100% - 2em) / 3);
  box-sizing: border-box;
}
/* 防止图片溢出容器 */
.gallery-images .box img {
  width: 100%;
  height: auto;
  display: block;
}

第三步：指定第四张容器强制换行 #

选中第四个.box元素，设置它占满整行宽度，自然就会换到新行展示：

.gallery-images .box:nth-child(4) {
  flex-basis: 100%;
}

以上配置实现的效果是：前3张图片排在第一行，第四张图片单独占第二行，第五、第六张图片排在第三行。如果你需要第四张之后的图片也各自换行，只需给对应的.box元素也设置flex-basis: 100%即可。

内容的提问来源于stack exchange，提问作者Ammar Ahmed