如何在flexbox中为第n个孩子交替设置样式

Question

我喜欢构建一个类似网格的结构，其中我的第一行和每奇数行都有两个柔性元素，宽度分别为60%和40%，而在我的第二行和每偶数行中，这些元素的宽度相反，分别为40%和60%(相反(。

当然，我会手工定义每个元素，但当我只是一个前端框架时，我喜欢以编程方式生成这些元素，这就是困难所在

我在这里准备静态版本：https://play.tailwindcss.com/dqiZBooPhQ

如何确定哪个元素获得60%，哪个元素获得40%？

Answer 1

我用css flexbox为您制作了一个简单的示例

CSS：

div {
min-width: 200px;
height: 25px;
}
.wrapper {
width: 500px;
display: flex;
flex-direction: column;
}

.wrapper > div {
display: flex;
}       

.wrapper > div:nth-child(even) {
width: 100%;
background-color: #f00;
}
.wrapper > div:nth-child(even) > div:first-child {
width: 40%;
border: 1px solid black;
}
.wrapper > div:nth-child(even) > div:last-child {
width: 60%;
border: 1px solid black;
}

.wrapper > div:nth-child(odd) {
width: 100%;
background-color: #0f0;
}
.wrapper > div:nth-child(odd) > div:first-child {
width: 60%;
border: 1px solid black;
}
.wrapper > div:nth-child(odd) > div:last-child {
width: 40%;
border: 1px solid black;
}

和HTML

<div class="wrapper">
<div id="first">
<div class="a">test</div>
<div class="b">test</div>
</div>
<div id="second">
<div class="a">test</div>
<div class="b">test</div>
</div>
<div id="third">
<div class="a">test</div>
<div class="b">test</div>
</div>
</div>