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

Posted 2023-03-06

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

【英文标题】：How to positioning every child in flex/grid/whatever simultaneously with nth-child?

【发布时间】：2021-12-03 04:31:29

【问题描述】：

我有这个代码：

.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，尽管它的工作方式可能不同）。 我需要上述所有案例同时工作。

【参考方案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>

【讨论】：

非常感谢。这正是我的意思。我要补充的是，如果你不能弯曲，它也可以是网格或其他

【参考方案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。

【讨论】：

如果这么简单，我就不会寻求帮助了；）我需要所有上述案例同时工作