<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
.holyGrail {
display: flex;
/* vh为相对于视口的高度。视口被均分为100vh。此处正好充满整个视口 */
min-height: 100vh;
/* 主轴方向改为垂直 */
flex-direction: column;
}
header, footer {
/* 头和尾固定高度10em */
flex: 0 0 10em;
background-color: darkgray;
/*height: 3em;*/
}
.holyGrail-body {
display: flex;
flex: 1;
}
.holyGrail-nav, .holyGrail-ads {
/* 两个边栏的宽度设置为12em */
flex: 0 0 12em;
background-color: antiquewhite;
}
.holyGail-content {
flex: 1;
background-color: yellowgreen;
}
.holyGrail-nav {
/* 导航放到最左边。不管html怎样顺序,导航都在最左边。 */
order: -1;
}
@media (max-width: 768px) {
.holyGrail-body {
flex-direction: column;
flex: 1;
}
.holyGrail-nav, .holyGail-content, .holyGrail-ads {
flex: 1;
}
}
</style>
</head>
<body>
<h2>圣杯布局</h2>
<pre>参考:<a href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html" target="_blank">flex实例</a></pre>
<p>圣杯布局是一种最常见的网页布局,从上到下有header,body,footer。body中有left(导航).center(主栏),right(侧栏)。</p>
<p>如果是小屏幕,躯干的三栏自动变为垂直叠加。</p>
<div class="holyGrail">
<header>header</header>
<div class="holyGrail-body">
<main class="holyGail-content">content</main>
<nav class="holyGrail-nav">nav</nav>
<aside class="holyGrail-ads">ads</aside>
</div>
<footer>footer</footer>
</div>
</body>
</html>
flex布局实例:圣杯布局
最新推荐文章于 2024-07-08 18:44:35 发布