实现双飞翼布局

也叫圣杯布局，圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局（想象一下圣杯是主体是加上两个耳朵；鸟儿是身体加上一对翅膀），圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师（传说是玉伯）改进并传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：三列布局，中间宽度自适应，两边定宽；中间栏要在浏览器中优先展示渲染；允许任意列的高度最高；

实现方法一：flex

使用flex布局实现双飞翼效果的重点有下面几个：
因为元素在DOM中的顺序是middle -> left -> right，所以

需要在渲染的时候对排列的顺序进行修改。

左右侧固定宽度。

中间的元素需要自适应。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #container{
            display: flex;//设置flex布局
            height:200px;
               justify-content: space-between;//两端对齐
        }
        #middle{
            
            height:200px;
            background: red;
            order: 2;
        }
        #left,#right{
            width: 200px;
            height: 200px;
            background: yellow;
            flex-shrink: 0;
                       text-align:center;
        }
        #left{
            order: 1;
        }
        #right{
            order: 3;
        }
        
    </style>
    <body>
        <div id="container">
            <div id="middle">圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局（想象一下圣杯是主体是加上两个耳朵；鸟儿是身体加上一对翅膀），圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师（传说是玉伯）改进并传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：三列布局，中间宽度自适应，两边定宽；中间栏要在浏览器中优先展示渲染；允许任意列的高度最高；</div>
            <div id="left">左边栏</div>
            <div id="right">右边栏</div>
        </div>
    </body>
</html>

页面效果

image.png

最后编辑于：2018.05.24 12:12:42