圣杯布局(双飞翼布局)

原创 郭兴旺 随笔 学习笔记 507阅读 2017-04-13 18:54:32 举报

圣杯布局,又叫双飞翼布局。是指左右宽度固定,中间宽度自适应伸缩,且中间先加载的一种布局方式。
html 代码

评论 ( 1 )
最新评论
yilukaihua 2017-04-13 22:20:30 1F

<body class="HolyGrail">
<header>...</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">...</main>
<nav class="HolyGrail-nav">...</nav>
<aside class="HolyGrail-ads">...</aside>
</div>
<footer>...</footer>
</body>
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}

header,
footer {
flex: 1;
}

.HolyGrail-body {
display: flex;
flex: 1;
}

.HolyGrail-content {
flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
/ 两个边栏的宽度设为12em /
flex: 0 0 12em;
}

.HolyGrail-nav {
/ 导航放到最左边 /
order: -1;
}

分享 一个圣杯布局