flex应用：实现两行五列数据，自适应

有一个页面的一部分需求如下：展示十个按钮

 为了不计算长度，不使用float，通过简单的方法来实现 就是flex。flex实现起来非常轻松。

html:

 css:

.bottom {
        position: absolute;
        bottom: 270px;
        width: 1080px;
        height: 320px;
        margin: 0 auto;
        z-index: 2;
    }
    
    .bottom ul {
        display: flex;
        flex-wrap: wrap;
        width: 1020px;
        margin: auto;
    }
    
    .bottom ul li {
        list-style: none;
        flex: 1 0 20%;
        width: 154px;
        height: 139px;
        margin-top: 20px;
        background: url(images/notcheck.png) no-repeat;
        color: #8ed6ff;
    }
    
    .notcheckli {
        background: url(images/notcheck.png) no-repeat;
        color: #8ed6ff;
    }

flex-wrap: wrap; 意思是要换行。

flex: 1 0 20%;   20%就是指每一个li占的宽度。

具体flex相关知识：一篇文章弄懂flex布局 - 听风是风 - 博客园