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:;

}

.left,.right{

    width:200px;

    background: darkorange;

}

.center{

    flex:;

}

巴特西

flex 圣杯布局

最新文章

热门文章