flex布局中怎么设置奇偶行不同

Question

flex布局

怎么设置奇数行和偶数行显示不同的背景颜色呢？

相关代码

        .list-area {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            justify-content: space-between;
        }
        .list-item {
            width: 200px;
            height: 200px;
            margin-right: 20px;
            margin-bottom: 20px;
            background: green;
        }

<div class="list-area">
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
</div>

期待能够实现每一行显示不同的背景颜色，但是flex里面好像没有行的概念，都是根据list-area来计算每一行有多少个元素的

Answer 1

.list-area .list-item:nth-of-type(odd) {

}

.list-area .list-item:nth-of-type(even) {

}

Answer 2

目前还不知道咋处理哎，大神们帮看看呀

Answer 3

如果高度确定，用背景图，不然纯css不好做