Question

我使用flex设置了一行缩略图，这很好用，它们在桌面上垂直居中。如何在移动屏幕上显示第一行中的3张图像和第二行中的2张图像？第二行中的图像应与左侧对齐。

div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
img {
  padding: 10px 5px;
  margin: auto;
}
@media only screen and (max-width: 480px) {
  div {
    flex-wrap: wrap;
  }
}

<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="" />
  <img src="http://placehold.it/250/220" alt="" />
  <img src="http://placehold.it/200/270" alt="" />
</div>

http://codepen.io/anon/pen/akLbzV

Answer 1

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

您可以使用flex，flex-basis或width属性执行此操作。但是，width在您的代码中效果最好，可能是因为图像元素具有固有的大小。

Revised Codepen

＆＃13;

* { box-sizing: border-box; }

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

img { padding: 10px 5px; }

@media only screen and (max-width: 480px) {
  div { flex-wrap: wrap;  }
  img:nth-child(-n + 3) { width: 33.33%; } /* targets first three elements only */
  img:nth-child(n + 4)  { width: 50%; } /* targets all elements except first three */
}

＆＃13;

<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="" />
  <img src="http://placehold.it/250/220" alt="" />
  <img src="http://placehold.it/200/270" alt="" />
  <img src="http://placehold.it/260/140" alt="" />
  <img src="http://placehold.it/210/200" alt="" />
</div>

＆＃13;

Answer 2

如果您无法使用width或flex-basis（例如，因为您的元素宽度不同而且您需要space-between）并且您可以使用额外的{{1}你可以这样做：

<div/>

CSS：

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

这不是最美丽的解决方案，但它解决了这个问题。

在移动设备上的第三个项目后，将flex项目换行

2 个答案: