flex布局

Posted 2020-09-05 刘爽_杭州

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;

}

以上是关于flex布局的主要内容，如果未能解决你的问题，请参考以下文章