flex 圣杯布局

2019-03-04 09:53:54来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

 

基本思路

圣杯布局分为3段:上、中、下。  中段被分为:左、中、右3块。

1:采用flex布局时,先把弹性容器主轴设置为垂直方向(flex-direction:column)

2:上、中、下3块弹性项目设置均匀拉伸(flex:1)或固定上、下两端大小,让中间自动拉伸。注意:flex:拉伸是方向为主轴方向

3:中段部分在设置为弹性容器,主轴方向为水平方向(flex-direction:row),此时左、中、右3块为弹性项目。中间块设置为自动拉伸,左、右两块可设置固定宽度。

 

代码

    <div class="container">
        <div class="header"></div>
        <div class="content">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </div>
.container{
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.header,
.footer{
    height: 75px;
    background: greenyellow;
}
.content{
    display: flex;
    flex-direction: row;
    flex: 1;
}
.left,.right{
    width:200px;
    background: darkorange;
}
.center{
    flex: 1;
}

 


原文链接:https://www.cnblogs.com/whnba/p/10462787.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端水波纹往外展开4

下一篇:阿里巴巴矢量图标库(Iconfont)-利于UI和前端的搭配