Question

我想知道是否有一个CSS选择器可以自动魔术地定位由flexbox或者浮点数创建的行上的最后一个div。

在我们的特定用途中，我们有一个具有不同宽度图像的图像网格。在其全宽度中，存在具有3个图像（每个33％）的行和具有2个图像（50/50或60/40）的行。使用垂直平板电脑查看时，所有图像都会变为50％，每行两次，手机100％。所有图像都在一个整体容器内，而不是行容器（因为三个成为两个）。

与许多网格类型布局一样，我们有2％的边距权限，需要在最右边的div上重置为0.

目前正在使用传统的＆＃34; last＆＃34;用于手动删除边距的类和用于操纵垂直平板布局的伪：nth-child（奇数）。我正在玩两种变体，一种使用浮动，一种使用flexbox。

是否有一个css选择器会针对每种情况下的最后一个div？

扩展布局：

在全尺寸显示器上 | img1 - 33％| 2％| img2 - 33％| 2％| img3 - 33％|
| img4 - 40％| 2％| img5 - 60％|
| img6 - 33％| 2％| img7 - 33％| 2％| img8 - 33％|

在垂直平板电脑上 | img1 - 50％| 2％| img2 - 50％|
| img3 - 50％| 2％| img4 - 50％|
| img5 - 50％| 2％| img6 - 50％|
| img7 - 50％| 2％| img8 - 50％|

在电话上 | img1 - 100％|
| img2 - 100％|
| img3 - 100％|
| img4 - 100％|
等等 ps我知道我的百分比没有加起来。

Answer 1

基本上是@vals said，但有更多细节：

让所有弹性项目具有相同的边距，m。
相应地设置宽度。例如，如果您希望行中有n个相等的元素，请设置width: calc(100%/n - m)。
让flex容器溢出其包含块，以隐藏不需要的边距。使用margin: -m来实现此目标。
将Flex容器放入包含overflow: hidden。

.wrapper {
  overflow: hidden;
  border: 1px solid;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  margin-right: -2%;
  text-align: center;
}
span {
  margin-right: 2%;
  border: 1px solid red;
  box-sizing: border-box;
}
span:nth-child(-n + 3) { width: calc(100%/2  - 2%); }
span:nth-child(n + 6)  { width: calc(100%/3  - 2%); }
span:nth-child(1)      { width: calc(100%    - 2%); }
span:nth-child(4)      { width: calc(100%*.4 - 2%); }
span:nth-child(5)      { width: calc(100%*.6 - 2%); }

<div class="wrapper">
  <div class="flex">
    <span>100%</span>
    <span>49%</span>
    <span>49%</span>
    <span>39%</span>
    <span>59%</span>
    <span>32%</span>
    <span>32%</span>
    <span>32%</span>
  </div>
</div>

Answer 2

不，没有一个很酷的CSS选择器可以实现这一点。

我知道轻松获得此效果的唯一方法是为Flexbox容器设置包装。

让所有 Flexbox容器内的元素具有相同的2％边距。

并将flexbox容器设置为在包装器右侧有2％的溢出，这将被隐藏。因此，您会发现元素与包装器的右边界对齐的错觉。

在flexbox或float之前定位最后一个div包装其余的

2 个答案: