flex布局链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7. </head>
    8. <style>
    9.     .parent{
    10.         width: 300px;
    11.         height: 300px;
    12.         border:1px solid #333;
    13.         display: flex;
    14.         flex-direction: column;
    15.         justify-content: space-evenly;
    16.     }
    17.     .parent div{
    18.         width: 50px;
    19.         height: 50px;
    20.         background-color: red;
    21.         border-radius: 50%;
    22.     }
    23.     .parent div:nth-child(2){
    24.         align-self: center;
    25.     }
    26.     .parent div:nth-child(3){
    27.         align-self:flex-end;
    28.     }
    29. </style>
    30. <body>
    31.     <div class="parent">
    32.         <div></div>
    33.         <div></div>
    34.         <div></div>
    35.     </div>
    36. </body>
    37. </html>

    1.PNG