使用flex解决自适应N列布局中的两端对齐

dom结构


  
头条
推荐
新闻
娱乐
财经
军事
汽车
体育

css:

.container{
        padding:20px 10px;
        background:green;
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap;
    }
    .item{
        border:1px solid #000;
        background:#fff;
        margin-bottom:10px;
        text-align:center;
        padding:5px 0;
        box-sizing:border-box;
        width:23%;
    }

你可能感兴趣的:(使用flex解决自适应N列布局中的两端对齐)