zoukankan      html  css  js  c++  java
  • css 图片flex布局最后一行居中

    .box-flex-warp {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    /* align-content: flex-start; 左对齐*/ } .box-flex { box-sizing: border-box; flex: 0 0 33.33%; } .box-flex img { min-width: 100%; max-width: 100%; object-fit: cover; vertical-align: bottom; }

    html

           <div class="box-flex-warp">
                        <div class="box-flex">
                            <img src="./assets/img/banner@2x.png" alt="">
                        </div>
                        <div class="box-flex">
                            <img src="./assets/img/baidu.png" alt="">
                        </div>
                        <div class="box-flex">
                            <img src="./assets/img/baidu.png" alt="">
                        </div>
                        <div class="box-flex">
                            <img src="./assets/img/baidu.png" alt="">
                        </div>
                        <div class="box-flex">
                            <img src="./assets/img/banner@2x.png" alt="">
                        </div>
                        <div class="box-flex">
                            <img src="./assets/img/baidu.png" alt="">
                        </div>
                        <div class="box-flex">
                            <img src="./assets/img/baidu.png" alt="">
                        </div>
                        <div class="box-flex">
                            <img src="./assets/img/baidu.png" alt="">
                        </div>
                    </div>
    align-content: flex-start; 左对齐
    图片左对齐
  • 相关阅读:
    2. 开关电源.电感
    1. 开关电源.引子
    资源介绍
    3. EMC EMS EMI
    2. 基于MCU应用的EMC指南
    1. 内部管脚电路
    9.150 Predefined macros
    海康安防平台
    Redis常见配置
    利用python检测单词的相似度
  • 原文地址:https://www.cnblogs.com/silences/p/7009645.html
Copyright © 2011-2022 走看看