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;
}

下面是实现效果图:
css实现一行四个元素动态布局_第1张图片

你可能感兴趣的:(CSS,css,css3,flex)