Flex application: realize two rows and five columns of data, self-adaptive

Some of the requirements for a page are as follows ： Show ten buttons

  In order not to calculate the length , Don't use float, Through a simple way to achieve Namely flex.flex It's very easy to implement .

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; It means a line break .

flex: 1 0 20%;   20% It means every li Take up the width of .

Specifically flex Related knowledge ： An article to understand flex Layout - Listening to the wind is the wind - Blog Garden