如何在CSS中选择换行flex行的最后一项

在CSS中选择换行flex行的最后一项，可以使用伪类选择器:last-child来实现。

:last-child选择器用于选择某个元素的最后一个子元素。在flex布局中，每个子元素都是flex项，可以通过设置flex-wrap: wrap来实现换行。然后，通过使用:last-child选择器来选择最后一行的最后一个子元素，即可实现选择换行flex行的最后一项。

以下是一个示例代码：

HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
  <div class="flex-item">Item 6</div>
</div>

CSS:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

.flex-item:last-child {
  background-color: red;
}

在上述代码中，.flex-container是flex容器，.flex-item是flex项。通过设置flex-wrap: wrap，当容器宽度不足以容纳所有项时，会自动换行。然后使用.flex-item:last-child选择器来选择最后一行的最后一个子元素，并设置其背景色为红色。

这样，最后一行的最后一个子元素就会有不同的样式，实现了选择换行flex行的最后一项。

腾讯云相关产品和产品介绍链接地址：