css flex知识点

实现垂直居中

image.png

html:

<div class="tpl-camera">
    <div class="container">
        <ul>
            <li>
                <i class="icon icon1"></i>
                <span class="tips">SONY IMX363</span>
            </li>
            <li>
                <i class="icon icon2"></i>
                <span class="tips">Optical zoom</span>
            </li>
            <li>
                <i class="icon icon3"></i>
                <span class="tips">4-axis optical stabilization</span>
            </li>
            <li>
                <i class="icon icon4"></i>
                <span class="tips">1.4μm large pixels</span>
            </li>
            <li>
                <i class="icon icon5"></i>
                <span class="tips">Dual camera designed for portraits</span>
            </li>
            <li>
                <i class="icon icon6"></i>
                <span class="tips">Dual pixel autofocus</span>
            </li>
            <li>
                <i class="icon icon7"></i>
                <span class="tips">12MP + 12MP dual camera</span>
            </li>
            <li>
                <i class="icon icon8"></i>
                <span class="tips">Hardware multi-frame noise reduction</span>
            </li>
        </ul>
    </div>
</div>

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