圣杯布局_flex方式 · 學海無涯_究其本質_李東旭

>[danger] 什么是圣杯布局? 1. 先看效果圖如下: ![](https://box.kancloud.cn/225ea039ca939f304c5e521811afbc85_1395x745.png) 2. 設計思路: (1) 上中下, 三部分使用垂直的flex布局 (2) 中間部分, 使用左中右的flex布局即可 3. 代碼如下: ``` <style> html, body{ height: 100%; } *{ margin: 0; } .big_wrap{ height: 100%; display: flex; flex-direction: column; } .header, .footer{ /*這里注冊垂直排列的flex布局, height不生效, 只能使用min-height*/ min-height: 100px; } .header{ background-color: black; } .footer{ background-color: gray; } .main{ width: 100%; flex: 1; display: flex; } .left{ width: 200px; height: 300px; background-color: red; } .center{ flex: 1; background-color: yellow; } .right{ width: 200px; height: 300px; background-color: blue; } /*flex 垂直排列前提, 父級容器和當前容器的, height必須有100%*/ </style> <body>  <div class="big_wrap"> <div class="header"></div> <div class="main"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> <div class="footer"></div> </div> </body> ```