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) {}