【前端】圣杯（双飞翼）布局

前端常用布局

• 静态布局
• 流式布局
• 自适应布局
• 响应式布局
• rem/em布局
• 弹性布局
• 圣杯（双飞翼）布局

圣杯布局

圣杯布局，又称双飞翼布局，特点是左右两边元素宽度固定，中间元素宽度随屏幕分辨率发生改变自动适应。
效果展示

实现方式

首先创建一个静态页面

	<div class="container">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>

	   * {
            padding: 0;
            margin: 0;
        }
        .left {
            width: 300px;
            height: 100vh;
            background-color: rgb(205, 232, 255);
        }

        .right {
            width: 300px;
            height: 100vh;
            background-color: rgb(203, 255, 228);
        }
        .middle {
        	height: 100vh;
            background-color: pink;
        }

方法1：flex布局

给container设置display:flex属性，使三个盒子在同一行显示

然后给middle设置扩张因子flex-frow:1属性，即给middle盒子分配剩余全部空间

	.container {
		display:flex
	}

	.middle {
		flex-grow:1
	}
	

方法2：浮动

给三个盒子都设置float:left，使三个盒子在同一行显示

给middle盒子设置宽度，使用calc（100% - 左右盒子宽度）计算

		.left {
            float: left;
        }

        .right {
            float: left;
        }
        .middle {
            float: left;
            width: calc(100% - 600px);
        }

方法3：定位

给left、right盒子及它们的父元素设置定位（父相子绝），使三个盒子在同一行显示

可以给middle设置内边距padding：0px 左右盒子宽度

	.container {
		position: relative;
    }

    .left,
    .right {
        position: absolute;
    }

    .middle {
        padding:0 300px
    }