圣杯布局:Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。
.HolyGrail{ display: -webkit-flex; display: flex; min-height: 100vh; flex-direction: column; border:1px solid red; font-size:16px; } header,footer { flex: 1; border:1px solid green; } .HolyGrail-body { display: -webkit-flex; display: flex; flex: 1; border:1px solid red; } .HolyGrail-content { flex: 1; border:1px solid green; } .HolyGrail-nav, .HolyGrail-ads { flex: 0 0 16em; border:1px solid red; } .HolyGrail-nav { order: -1; }
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>H5标准页面</title> <link href="css/css实现树形图 - 副本 (2).css" rel="stylesheet" type="text/css" /> </head> <body class="HolyGrail"> <header>...</header> <section class="HolyGrail-body"> <main class="HolyGrail-content">...</main> <nav class="HolyGrail-nav">...</nav> <aside class="HolyGrail-ads">...</aside> </section> <footer>...</footer> </body> </html>
如果是小屏幕,躯干的三栏自动变为垂直叠加。
@media (max- 768px) { .HolyGrail-body { flex-direction: column; flex: 1; } .HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content { flex: auto; } }