# 需求 圣杯布局左中右三列布局，渲染順序中間列書寫在前保證提前渲染，左右兩列定寬，中間列自適應剩余寬度。 <br> 圣杯布局與雙飛翼布局的不同之處，圣杯布局的的左中右三列容器沒有多余子容器存在，通過控制父元素的 padding 空出左右兩列的寬度。 <br> <br> # 關鍵點 * 圣杯布局的關鍵點是通過 margin-left 與 left 屬性將左右兩列放置到準確的位置 * 圣杯布局的關鍵點父元素需要設置 padding * 圣杯布局的關鍵點 margin-left 取值為百分比時，是以其父元素的寬度為基準的 <br> <br> # float實現 HTML： ``` // pug 模板引擎 div.g-container div.g-middle middle div.g-left left div.g-right right ``` SCSS： ``` .g-container { // overflow: hidden; position: relative; height: 100vh; padding: 0 200px; min-width: 400px; & > div { height: 100vh; float: left; text-align: center; color: #fff; line-height: 100vh; font-size: 3vw; } } .g-middle { position: relative; width: 100%; background: #cc6630; } .g-left { position: relative; width: 200px; background: #ffcc00; margin-left: -100%; left: -200px; } .g-right { position: relative; width: 200px; background: pink; margin-left: -200px; right: -200px; } ``` <br> # flex實現 HTML： ~~~ // pug 模板引擎 div.g-container div.g-middle middle div.g-left left div.g-right right ~~~ SCSS： ~~~ .g-container { position: relative; height: 100vh; min-width: 400px; display: flex; flex-direction: row; flex-wrap: nowrap; & > div { height: 100vh; text-align: center; color: #fff; line-height: 100vh; font-size: 3vw; } } .g-middle { order: 2; flex: auto 1 0 ; background: #cc6630; } .g-left { order: 1; flex: 200px 0 0; background: #ffcc00; } .g-right { order: 3; flex: 200px 0 0; background: pink; } ~~~