flex布局

语法：

display：flex;

失效属性：vertical-align，float,clear;

flex-direction:row;//主轴水平

flex-direction:column;//主轴垂直

居中：

display：flex;

justify-content: center;//主轴居中对齐

垂直：

display：flex;

align-items: center;//交叉轴居中对齐

 

圣杯局部：

<body>
    <header></header>
    <div class="content">
        <div class="middle"></div>
        <div class="left"></div>
        <div class=""right></div>
    <footer></footer>
</body>

 

body{

    display:flex;

    min-height:100%;

    flex-direction:column;

}

header,footer{

    flex:1;

}

.content{

    display:flex;

    flex:1;

}

.middle{

    flex:1;

}

.left .right{

    flex:0 0 10em;

}

.left{

    order:-1;

}

 
posted @ 2017-03-21 22:09  刘爽_杭州  阅读(143)  评论(0)  编辑  收藏  举报