flex three-point screen layout

Mahjong achieve three sieve: results as shown

　　

Specific implementation code:

　　html code:

  <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    <div>

 

　　　　css code:

   .box{
        width: 200px;
        height: 200px;
        padding: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between; /*设置两端对齐*/
        border: 2px solid #ccc;
        border-radius: 10px;
    }
    .item{
        width: 40px;
        height : 40px ; 
        border-RADIUS : 50% ; 
        background-Color : # 666 ; 
    } 
    .Item: Child-Nth (2) { 
        align = left Self- : Center ; / * vertical center * / 
    } 
    .Item: Child-Nth ( . 3) { 
        align = left Self- : Flex-End ; / * vertical tail alignment * / 
    }