css - 当有 4 个子元素时，将 flexbox 宽度切换为 50%

Question

我正在尝试使用 flexbox 设置图像的网格显示。一切正常，布局看起来不错，除非我有 4 张图片。

这是我当前的图像代码

section.flex-container .field-items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap-reverse;
  align-items: stretch;
}
section.flex-container .field-items .field-item {
  display: inline;
  flex-grow: 1;
  width: 33%;
  padding: 10px;
}

当存在 4 个 .field-items 时，有什么方法可以将宽度增加到 50%？同样，我只希望在有 4 张图像时出现 50%。

可在 codepen 上找到演示:Demo

Answer 1

您可以通过 sibling 计数来实现这一点，如果您以前从未使用过它，那将是非常棒的。您可能已经熟悉伪类 :nth-child，它允许您根据某项在子项列表中的位置来选择它。

In comes :nth-last-child. The difference between the two is that nth-child applies to the nth child counting from the top (ie, the child that has n-1 elements before it) while the nth-last-child applies to the nth child counting from the bottom (ie, the child that has n-1 elements after it!). (Original | Follow-up)

使用兄弟计数，当 .field-item 有 4 个元素时，您可以增加宽度，如下所示:

section.flex-container {
  .field-items{
    .field-item {
      &:first-child:nth-last-child(4), &:first-child:nth-last-child(4) + .field-item {
        width:50%;
      }
    }
  }
}

CodePen