是否可以在弹性布局中定位每行的第一个和最后一个元素? [英] Is it possible to target the first and the last element per row in a flex layout?

问题描述

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

Given a list of thumbnails in a flex layout, is it possible to target the first and the last element per row using only CSS if the flex container has variable width?

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

推荐答案

.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;
}
.thumbnail:nth-child(odd) {
  background: #e6e6e6;
}
.thumbnail:nth-child(even) {
  background: #e9edf2;
}

<ul class="thumbnails" id="wrapper">
  <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>

以我的方式，只需使用:nth-child(even)和:nth-child(odd).希望这会有所帮助.

In my way just use :nth-child(even) and :nth-child(odd). Hope this helps.

这篇关于是否可以在弹性布局中定位每行的第一个和最后一个元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！