css flex知识点

实现垂直居中

image.png

html:

    

        

            

                
                SONY IMX363
            
            

                
                Optical zoom
            
            

                
                4-axis optical stabilization
            
            

                
                1.4μm large pixels
            
            

                
                Dual camera designed for portraits
            
            

                
                Dual pixel autofocus
            
            

                
                12MP + 12MP dual camera
            
            

                
                Hardware multi-frame noise reduction
            
        
    

css

.tpl-camera {
    padding-top: $spacer-11;
    padding-bottom: $spacer-11;
    ul {
        @include clearfix;
        display: flex;
        flex-flow: wrap row;
        justify-content: space-around;
        li {
            position: relative;
            background-color: #E3F5E8;
            float: left;
            width: calc(25% - 21px);
            margin-right: $spacer-6;
            margin-bottom: $spacer-5;
            padding: $spacer-3 $spacer-5;
            display: flex;
            flex-flow: wrap row;
            justify-content: flex-start;
            .tips {
                display: block;
                color: $mi-slate-gray;
                max-width: calc(100% - 3em);
                align-self: center;
            }
            i {
                display: block;
                width: 2em;
                height: 2em;
                margin-right: 1em;
                max-width: calc(100% - 3em);
                align-self: center;
            }
            i.icon1 {
                background: url(https://i01.appmifile.com/webfile/globalimg/products/pc/mi8/camera-1.png) 50% 50% no-repeat;
                background-size: contain;
                font-size: 16px;
            }
            i.icon2 {
                background: url(https://i01.appmifile.com/webfile/globalimg/products/pc/mi8/camera-2.png) 50% 50% no-repeat;
                background-size: contain;
                font-size: 16px;
            }
            i.icon3 {
                background: url(https://i01.appmifile.com/webfile/globalimg/products/pc/mi8/camera-3.png) 50% 50% no-repeat;
                background-size: contain;
                font-size: 16px;
            }
            i.icon4 {
                background: url(https://i01.appmifile.com/webfile/globalimg/products/pc/mi8/camera-4.png) 50% 50% no-repeat;
                background-size: contain;
                font-size: 16px;
            }
            i.icon5 {
                background: url(https://i01.appmifile.com/webfile/globalimg/products/pc/mi8/camera-5.png) 50% 50% no-repeat;
                background-size: contain;
                font-size: 16px;
            }
            i.icon6 {
                background: url(https://i01.appmifile.com/webfile/globalimg/products/pc/mi8/camera-6.png) 50% 50% no-repeat;
                background-size: contain;
                font-size: 16px;
            }
            i.icon7 {
                background: url(https://i01.appmifile.com/webfile/globalimg/products/pc/mi8/camera-7.png) 50% 50% no-repeat;
                background-size: contain;
                font-size: 16px;
            }
            i.icon8 {
                background: url(https://i01.appmifile.com/webfile/globalimg/products/pc/mi8/camera-8.png) 50% 50% no-repeat;
                background-size: contain;
            }
            &:nth-child(4n+4) {
                margin-right: $spacer-0;
            }
        }
    }
}

六个居中代码

ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start;
    flex-wrap: wrap;
    li {
        display: inline-block;
        flex: 0 0 calc(99.99% / 6);
        max-width: calc(99.99% / 6);
        text-align: center;
    }
}