是否可以在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 将最后一个元素推到左侧。