定位 flexbox 或 float 之前的最后一个 div 包裹其余部分

Question

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

在我们的特定用途中，我们有一个包含不同宽度图像的图像网格。在其全宽中，有包含 3 个图像的行（每行 33%）和包含 2 个图像的行（50/50 或 60/40）。当使用立式平板电脑查看时，所有图像都变为 50%，每行两张，phone 100%。所有图像都在一个整体容器中，而不是行容器中（因为三个变成两个）。

像许多网格类型布局一样，我们有 2% 的边距，需要在最右边将其重置为 0 div。

目前使用传统的 "last" class 手动删除边距，并使用 pseudo :nth-child(odd) 来操纵垂直平板布局。我正在玩两种变体，一种使用浮动，一种使用 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%|

在 phone
|img1 - 100%|
|img2 - 100%|
|img3 - 100%|
|img4 - 100%|
ETC ps 我知道我的百分比加起来不对。

Answer 1

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

据我所知，轻松获得此效果的唯一方法是为 flexbox 容器设置一个包装器。

让所有 flexbox容器内的元素有相同的2% margin right.

并将 flexbox 容器设置为在包装器右侧有 2% 的溢出，这将被隐藏。所以你会产生元素与包装器右边框对齐的错觉。

Answer 2

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

让所有弹性项目具有相同的边距，m。
相应地设置宽度。例如，如果您希望一行中有 n 个相等的元素，请设置 width: calc(100%/n - m).
让 flex 容器溢出它的包含块，以隐藏不需要的 margin 边距。使用 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>

定位 flexbox 或 float 之前的最后一个 div 包裹其余部分

Targeting the last div before flexbox or float wraps the rest

html

css

css-float

flexbox