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

    效果:

     

  • 相关阅读:
    如何测试一个纸杯?
    你对测试最大的兴趣在哪里?为什么
    您认为在测试人员同开发人员的沟通过程中,如何提高沟通的效率和改善沟通的效果?维持测试人员同开发团队中其他成员良好的人际关系的关键是什么?
    BUG管理工具的跟踪过程(用BugZilla为例子
    说说你对集成测试中自顶向下集成和自底向上集成两个策略的理解,要谈出它们各自的优缺点和主要适应于哪种类型测试
    你认为做好测试计划工作的关键是什么
    单元测试、集成测试、系统测试的侧重点是什么?
    黑盒测试和白盒测试是软件测试的两种基本方法,请分别说明各自的优点和缺点!
    Python 运算符
    Python 基础数据类型
  • 原文地址:https://www.cnblogs.com/xulinjun/p/12080978.html
Copyright © 2011-2022 走看看