css实现一行四个元素动态布局

主要用到的是flex布局，还有css3的伪类选择器。多复习巩固啊。。。。

            

              
                
              
            
 




/*父盒子*/
.center-ads-list{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 13px 0px;
    width: 100%;
    flex-flow: row wrap; /*按照行排列，一行排不下换行。flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。*/
}

.center-ads-list>li{
    flex: 0.25;/*一行排列4个*/
    height: 200px;
    border-radius: 20px;
    margin-right: 10px;
    margin-bottom: 10px;
}

/* 在所有的li中，所有是索引是4（从1开始）的倍数的li元素， 去掉margin-right */ 
.center-ads-list>li:nth-of-type(4n+0){
    margin-right: 0px;
}

.center-ads-list>li a{
    display: block;
    height: 200px;
}
.center-ads-list>li a img{
    height: 200px;
    border-radius: 10px;
}

下面是实现效果图：