css flex 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                width:100%;
            }
            div{
                width:600px;
                height:500px;
                
                margin: 0 auto;
                background-color: pink;
                display: flex;
                flex-direction: row;/*flex父容器主轴方向 默认row  column*/
                justify-content:center;/*flex项目在主轴方向的布局 默认flex-start space-between space-around center */
                flex-wrap: wrap;/*flex项目在主轴方向是否换行 默认 no-wrap*/
                align-items:center;/*flex项目在侧轴方向的布局 默认flex-start space-between space-around center*/ /*flex-flow 是flex-direction flex-wrap复合属性 row no-wrap*/
            }
            div span{
                width:150px;
                line-height: 100px;
                height:100px;
                background-color: purple;
                align-self:flex-end /*flex单个项目在侧轴方向的布局*/                
            }
            div span:nth-child(2){
                order:-1;/*flex单个项目在主轴方向的位置默认为0 */
            }

        </style>
    </head>
    <body>
        <div>
            <span>1</span>
            <span>2</span>            
            <span>3</span>            
        </div>
    </body>
</html>

 

posted @ 2020-04-07 14:00  howhy  阅读(55)  评论(0)    收藏  举报