Html 在手机上，将弹性物品包装在第三件物品之后

我用flex设置了一行缩略图，效果很好，它们垂直居中于桌面上。如何在手机屏幕上第一行显示3幅图像，第二行显示2幅图像？第二行中的图像应向左对齐

div{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
img{
填充：10px 5px；
保证金：自动；
}
@仅介质屏幕和（最大宽度：480px）{
div{
柔性包装：包装；
}
}

---

您可以尝试的一件事是调整媒体查询中每个flex项的宽度，以便将三个项强制放入第一行，将两个项强制放入后续行

您可以使用

flex

、

flex-basis

或

width

属性执行此操作。但是，

width

在代码中效果最好，可能是因为图像元素具有固有的大小

*{框大小：边框框；}
div{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
img{padding:10px 5px；}
@仅介质屏幕和（最大宽度：480px）{
div{flex wrap:wrap；}
img:nth child（-n+3）{width:33.33%；}/*只针对前三个元素*/
img:n第n个子元素（n+4）{width:50%；}/*以除前三个之外的所有元素为目标*/
}

---

如果您不能使用

宽度

或

弹性基础

（例如，因为您的元素具有不同的宽度，并且您需要

间距

），并且您可以使用额外的

，您可以执行以下操作：

<div>
  <img src="http://placehold.it/150/220" alt="" />
  <img src="http://placehold.it/200/250" alt="" />
  <img src="http://placehold.it/240/100" alt="" />
  <div class="flex-break"/>
  <img src="http://placehold.it/250/220" alt="" />
  <img src="http://placehold.it/200/270" alt="" />
</div>

---

这不是最漂亮的解决方案，但它解决了问题。

Flexbox没有这个选项。flexbox中没有明确的定义。

.flex-wrap {
   width: 100%;
}

@media only screen and (min-width: 481px) {
  display: none;
}