zoukankan      html  css  js  c++  java
  • 几种常见的flex布局

    1,水平等距排列、俩端对齐、垂直方向居顶对齐

    html:

    <div class="container flex">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

    css:

    .container{
        width: 1000px;
        margin: 100px auto;
        border: #333 solid 1px;
        height: 500px;
    }
    .div1{
        width: 100px;
        height: 120px;
        background-color: yellowgreen;
    }
    .div2{
        width: 200px;
        height: 150px;
        background-color: salmon;
    }
    .div3{
        width: 160px;
        height: 200px;
        background-color: bisque;
    }
    .flex{
        display: flex;
        justify-content: space-between;
    }

    效果:

    2,水平等距排列、俩端对齐、垂直方向居中对齐

    html:

    <div class="container flex">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

    css:

    .container{
        width: 1000px;
        margin: 100px auto;
        border: #333 solid 1px;
        height: 500px;
    }
    .div1{
        width: 100px;
        height: 120px;
        background-color: yellowgreen;
    }
    .div2{
        width: 200px;
        height: 150px;
        background-color: salmon;
    }
    .div3{
        width: 160px;
        height: 200px;
        background-color: bisque;
    }
    .flex{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    效果:

    3,水平等距排列、俩端对齐、垂直方向居底对齐

    html:

    <div class="container flex">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

    css:

    .container{
        width: 1000px;
        margin: 100px auto;
        border: #333 solid 1px;
        height: 500px;
    }
    .div1{
        width: 100px;
        height: 120px;
        background-color: yellowgreen;
    }
    .div2{
        width: 200px;
        height: 150px;
        background-color: salmon;
    }
    .div3{
        width: 160px;
        height: 200px;
        background-color: bisque;
    }
    .flex{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    效果:

    4,水平排列、垂直方向居中对齐

    html: 

    <div class="container flex">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

    css:

    .container{
        width: 1000px;
        margin: 100px auto;
        border: #333 solid 1px;
        height: 500px;
    }
    .div1{
        width: 100px;
        height: 120px;
        background-color: yellowgreen;
    }
    .div2{
        width: 200px;
        height: 150px;
        background-color: salmon;
    }
    .div3{
        width: 160px;
        height: 200px;
        background-color: bisque;
    }
    .flex{
        display: flex;
        align-items: center;
    }

    效果:

    5,水平居中排列、垂直方向居中对齐

    html:

    <div class="container flex">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

    css:

    .container{
        width: 1000px;
        margin: 100px auto;
        border: #333 solid 1px;
        height: 500px;
    }
    .div1{
        width: 100px;
        height: 120px;
        background-color: yellowgreen;
    }
    .div2{
        width: 200px;
        height: 150px;
        background-color: salmon;
    }
    .div3{
        width: 160px;
        height: 200px;
        background-color: bisque;
    }
    .flex{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    效果:

    6,垂直等距排列、俩端对齐、水平方向居中对齐

    html:

    <div class="container flex">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

    css:

    .container{
        width: 1000px;
        margin: 100px auto;
        border: #333 solid 1px;
        height: 500px;
    }
    .div1{
        width: 100px;
        height: 120px;
        background-color: yellowgreen;
    }
    .div2{
        width: 200px;
        height: 150px;
        background-color: salmon;
    }
    .div3{
        width: 160px;
        height: 200px;
        background-color: bisque;
    }
    .flex{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    效果:

    7,垂直等距排列、俩端对齐、水平方向居左对齐

    html:

    <div class="container flex">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

    css:

    .container{
        width: 1000px;
        margin: 100px auto;
        border: #333 solid 1px;
        height: 500px;
    }
    .div1{
        width: 100px;
        height: 120px;
        background-color: yellowgreen;
    }
    .div2{
        width: 200px;
        height: 150px;
        background-color: salmon;
    }
    .div3{
        width: 160px;
        height: 200px;
        background-color: bisque;
    }
    .flex{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    效果:

    8,垂直排列、水平方向居中对齐

    html:

    <div class="container flex">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

    css:

    .container{
        width: 1000px;
        margin: 100px auto;
        border: #333 solid 1px;
        height: 500px;
    }
    .div1{
        width: 100px;
        height: 120px;
        background-color: yellowgreen;
    }
    .div2{
        width: 200px;
        height: 150px;
        background-color: salmon;
    }
    .div3{
        width: 160px;
        height: 200px;
        background-color: bisque;
    }
    .flex{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    效果:

     

  • 相关阅读:
    如何很好的使用Linq的Distinct方法
    根据字符串获取对应类型(Type) 转
    .Net 读取xml
    认识ASP.NET MVC的5种AuthorizationFilter
    使用admin插入数据失败
    乱序批量精确修改文件名
    多进程+协程方案处理高IO密集,提升爬取效率
    Linux 安装 CMake
    Ubuntu 截图工具deepin-screenshot添加使用
    Linux virtualenv .bashrc配置文件
  • 原文地址:https://www.cnblogs.com/xulinjun/p/12080978.html
Copyright © 2011-2022 走看看