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; 左对齐
    图片左对齐
  • 相关阅读:
    idea config 文件
    python 时间相关
    python 限定类型
    windows 创建文件夹 链接
    java 笔记
    yml 字符串换行问题
    nginx 编译安装,问题
    git readme.md 文档头部写法
    git tag 相关操作
    敏捷开发
  • 原文地址:https://www.cnblogs.com/silences/p/7009645.html
Copyright © 2011-2022 走看看