如何反转每行的弯曲方向？

Question

我正在尝试使用 Flexbox 来看看这是否可行。我正在努力完成两件事：

1. div 容器宽度为 60%，另外为 40%（因此每行只有 2 个项目，即 100%）
2. 每一行都会反转（所以第一行是 60%/40%，然后下一行是 40%/60%）

我的设置如下（项目将始终相等，因此在本例中为 6 个项目，总共 3 行）

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

.ImageItem {
  border:1px solid #000000;
}

.ImageItem:nth-child(even) {
  width: 60%;
}

.ImageItem:nth-child(odd) {
  width: 40%;
}

<div class="ImageContainer">
  <div class="ImageItem">1</div>
  <div class="ImageItem">2</div>
  <div class="ImageItem">3</div>
  <div class="ImageItem">4</div>
  <div class="ImageItem">5</div>
  <div class="ImageItem">6</div>
</div>

Answer 1

对 Flex 子项使用如下选择器。 “:nth-child(4n+x)”将以四步为单位选择具有相应偏移量的子项：

html,
body {
  margin: 0;
}

.ImageContainer {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.ImageContainer>div {
  border: 1px solid #ccc;
  height: 60px;
  box-sizing: border-box;
}

.ImageItem:nth-child(4n+1),
.ImageItem:nth-child(4n+4) {
  width: 60%;
}

.ImageItem:nth-child(4n+2),
.ImageItem:nth-child(4n+3) {
  width: 40%;
}

<div class="ImageContainer">
  <div class="ImageItem"></div>
  <div class="ImageItem"></div>
  <div class="ImageItem"></div>
  <div class="ImageItem"></div>
  <div class="ImageItem"></div>
  <div class="ImageItem"></div>
  <div class="ImageItem"></div>
  <div class="ImageItem"></div>
  <div class="ImageItem"></div>
  <div class="ImageItem"></div>
</div>

Answer 2

尝试像这样重组你的代码

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

.ImageRow {
  display: flex;
  flex: 1;
  width: 100%;
}

.ImageItem {
  flex: 1;
}

.ImageItem:nth-child(even) {
  flex: 60%;
}

.ImageItem:nth-child(odd) {
  flex: 40%;
}

<div class="ImageContainer">
  <div class="ImageRow">
    <div class="ImageItem"></div>
    <div class="ImageItem"></div>
  </div>
  <div class="ImageRow">
    <div class="ImageItem"></div>
    <div class="ImageItem"></div>
  </div>
  <div class="ImageRow">
    <div class="ImageItem"></div>
    <div class="ImageItem"></div>
  </div>
</div>

CSS 没有父选择器或任何方式来定位前一个同级，这就是为什么你需要稍微调整你的 HTML 代码，让我知道它是否有某种帮助