如何实现Flex布局每行反转排列方向及宽度占比交替？

你的现有代码无法实现行方向反转的问题在于，当前选择器是基于子元素的奇偶性，而非每一行的位置。我们需要针对每一行的元素位置来设置宽度，同时注意box-sizing避免边框影响宽度计算：

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

.ImageItem {
  border: 1px solid #000000;
  box-sizing: border-box; /* 确保边框包含在宽度内，避免换行异常 */
}

/* 奇数行（第1、3行）的第一个元素，偶数行的第二个元素设为60%宽度 */
.ImageItem:nth-child(4n+1),
.ImageItem:nth-child(4n+4) {
  width: 60%;
}

/* 奇数行的第二个元素，偶数行的第一个元素设为40%宽度 */
.ImageItem:nth-child(4n+2),
.ImageItem:nth-child(4n+3) {
  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>

逻辑说明： #

• 利用nth-child(4n+X)的选择规则，每4个元素为一个循环（对应两行）：
  • 4n+1：第1、5个元素（第1、3行的第一个）→ 60%
  • 4n+2：第2、6个元素（第1、3行的第二个）→ 40%
  • 4n+3：第3个元素（第2行的第一个）→ 40%
  • 4n+4：第4个元素（第2行的第二个）→ 60%
• 添加box-sizing: border-box是为了让边框宽度包含在元素的设定宽度内，防止总宽度超过100%导致换行错误。

内容的提问来源于stack exchange，提问作者Michael C.