html - 我怎样才能制作一个有两行的 flexbox 布局，但将元素分组到两个子列中？

Question

这很难用语言来解释。我正在尝试使用 flexbox 做一个看起来像这样的列表:

ul {
  display:flex;
  width:100%;
}

li {
  list-style:none;
  width: 200px; height: 140px;
  background-color:blue;
  color:#fff;
}
li:nth-child(odd) {
 /*?*/
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

有什么想法吗？

Answer 1

您可以使用 order 和一些 nth-child 选择器来做到这一点。

要选择每 2 个元素(您的 3-4、7-8 个元素)，您可以使用 li:nth-child(4n), li:nth-child(4n-1)。例如，如果 n=1，那么您将选择 4*1 和 4*1-1。所以第 4 个和第 3 个元素。等等。

要选择其他元素(在您的示例中不是必需的，但知道它很好)，您可以使用 li:nth-child(4n-2),li:nth-child(4n-3)

然后，您通过设置 order:1 更改它们在 flex 容器内的顺序。默认值为 0。在此处阅读更多信息 -> flex order

请看下面的片段

li:nth-child(4n),
li:nth-child(4n-1) {
  background: Red;
  order: 1;
}

li:nth-child(4n-2),
li:nth-child(4n-3) {
  background: blue;
}

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  list-style: none;
  width: calc(25% - 10px);
  height: 140px;
  background-color: blue;
  color: #fff;
  margin: 0 5px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

OBS 我在 li 上使用了 width: calc(25% - 10px); 因为 200px x 4超出了 SO 片段的宽度 :)