聖杯布局就是所說的3欄布局, 左右定寬, 中間自適應。 使用position和float來實現就不說了，主要說一下用flex怎麼來實現
html**：
```我是左邊
我是中間
我是右邊
.content
.left
.middle
.right
.item如果所有的專案的flex-grow屬性都為1,則他們將等分剩餘空間.
如果乙個專案的flex-grow屬屬性為2,則將佔據剩餘空間將比其他項多一倍
.item如果所有專案的flex-shrink的屬性都為1,當空間不足時,都將等比縮小.
如果乙個專案的flex-shrink屬性為0,其他專案為1,則空間不足時,0將不縮小
.item該屬性有兩個快捷值,auto(1 1 auto)和none(0 0 auto)定義了分配多餘空間之前,專案佔據的主軸空間. 瀏覽器根據這個屬性,計算主軸是否有多餘空間,它的預設值為auto,專案原本的大小
使用flex 實現聖杯布局
移動端flex布局最近挺火的，空閒時間也看了些資料！好記性不如賴筆頭，做下筆記吧。閒話少說 先上 container header 頭部 center dyleft 左欄div dycenter dycenter dyright 右欄divx footer 底部 複製 css html,body c...
flex 聖杯布局
基本思路 聖杯布局分為3段 上 中 下。中段被分為 左 中 右3塊。1 採用flex布局時，先把彈性容器主軸設定為垂直方向 flex direction column 2 上 中 下3塊彈性專案設定均勻拉伸 flex 1 或固定上 下兩端大小，讓中間自動拉伸。注意 flex 拉伸是方向為主軸方向 3...
flex做的聖杯布局
首先聖杯布局是兩列固定寬度，中間自適應。我直接說一下步驟，上圖，上圖 1.步驟1 2.步驟2 上面就是基本的步驟，下面我把 給大家，大家感興趣自己拿回去偷偷的擼就可以 將整個頁面設定為彈性盒 html,body 設定頭部和尾部的顏色 footer,header 設定中間內容區域樣式 center 設...