0

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来计算每一行有多少个元素的

2019-05-18 提问
3 个回答
0

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

}

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

}

0

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

0

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

撰写答案

推广链接