如何将每个孩子与第 n 个孩子同时定位在 flex/grid/whatever 中？

Question

我有这个代码：

.parent {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  width: 200px;
  height: 200px;
}

.child,
.child:not(:nth-child(1)) {
  width: 100px;
  height: 100px;
}

.child:last-child:nth-child(1) {
  width: 200px;
  height: 200px;
}

.child:nth-child(1),
.child:last-child:nth-child(2) {
  width: 100px;
  height: 200px;
}

.child:nth-last-child(4) {
  width: 100px;
  height: 100px;
}

Test with 1 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
</div>
Test with 2 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
</div>
Test with 3 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
</div>
Test with 4 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
  <div class="child" style="background-color:orange;">4</div>
</div>

但我希望最后一个示例有不同的顺序，即：

1 2
3 4

重要的是我不能为每个 flex 孩子添加不同的类。 Twitter 库的行为类似，但那里更复杂（它是 flex 中的 flex，可能还有一些 JS，尽管它的工作方式可能不同）。 我需要上述所有案例同时工作。

Answer 1

您可以通过使用 grid 而不是 flex 来实现这一点。看看这个：

.parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  width: 200px;
  height: 200px;
}

/* in case there is only one child */
.child:first-child:nth-last-child(1){
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

/* in case there are 2 children */
.child:first-child:nth-last-child(2),
.child:first-child:nth-last-child(2) ~ .child{
  grid-row: 1 / span 2;
}

/* in case there are 3 children, make the first one span 2 rows */
.child:first-child:nth-last-child(3) {
  grid-row: 1 / span 2;
}

Test with 1 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
</div>
Test with 2 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
</div>
Test with 3 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
</div>
Test with 4 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
  <div class="child" style="background-color:orange;">4</div>
</div>

Answer 2

在这种情况下，您需要像这样构建弹性网格：

.parent {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

.child {
  width: 100px;
  height: 100px;
}

Test with 4 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
  <div class="child" style="background-color:orange;">4</div>
</div>

请注意，我们使用flex-wrap: wrap 将元素推送到下一行，而不是使用flex-direction: column。