flex 圣杯布局

最新推荐文章于 2024-07-08 18:44:35 发布

weixin_34133829

最新推荐文章于 2024-07-08 18:44:35 发布

阅读量174

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/whnba/p/10462787.html

本文介绍了一种使用Flex布局实现圣杯布局的方法，通过设置弹性容器和项目的属性，实现上、中、下三段布局，其中中段分为左、中、右三块，左、右可设置固定宽度，中间自动拉伸。

基本思路

圣杯布局分为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;
}