css - 是否可以在 flex 布局中定位每行的第一个和最后一个元素？

Question

给定 flex 布局中的缩略图列表，如果 flex 容器具有可变宽度，是否可以仅使用 CSS 定位每行的第一个和最后一个元素？

.thumbnails {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  flex-flow: row wrap;
}
.thumbnail {
  width: 250px;
  height: 250px;
  margin: 5px;
  background: #ccc;
  border: 1px solid #000;
}

<ul class="thumbnails">
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
  <li class="thumbnail"></li>
</ul>

Answer 1

我会为 flex 元素设置一个宽度(例如 25% 以连续显示 4 个或 33.333% 以显示 3 个)。通过这种方式，您始终可以知道每行有多少元素。在一行 3 中，您可以使用 ... element:nth-child(3n) 定位最后一个元素，使用 element(3n-2) 定位第一个元素。这同样适用于每行任意数量的元素。如果包含的数字少于您的想法，您可能会在最后一行看到一些看起来很奇怪的东西。例如，如果您将 flex 元素设置为 33.333% 宽度，并且最后一行仅包含 2 个元素，则样式可能会中断，具体取决于您如何调整 flexbox。您始终可以通过应用 margin-right: auto 将最后一个元素推到左侧。