flex佈局實現聖盃佈局

使用h5的flex實現的聖盃佈局，效果圖如下，由於經常用到，所以寫個帖備份一下。

這是最常見的網頁佈局方式，使用h5的flex佈局實現非常簡單。聖盃佈局中間主內容隨著瀏覽器大小縮放，其他地方不變。

flex佈局使用的時候，把父容器用

display:flex

設定為flex容器，裡面的3個DIV，把固定大小的2個DIV設定固定的高度、寬度（水平的時候設定寬度，垂直的時候設定高度），把自動伸縮的DIV設定

flex:1

即可。就是這麼簡單。

flex-direction: column

設定3個DIV為垂直方向（設定垂直方向的時候需要設定高度為100%），預設是水平方向。

完整程式碼：

<

html

>

<

head

>

<

style

>

div

{

outline

：

2

px

solid

；

margin

：

5

px

；

}

/* 以下為整個頁面的佈局 */

。

main

{

display

：

flex

；

flex-direction

：

column

；

height

：

100

%

；

}

。

top

，

。

footer

{

height

：

50

px

；

}

/* 以下為中間的body佈局 */

。

body

{

flex

：

1

；

display

：

flex

；

}

。

body-main

{

flex

：

1

；

background-color

：

yellow

；

}

。

body-left

，

。

body-right

{

width

：

100

px

；

}

style

>

head

>

<

body

>

<

div

class

=

“main”

>

<

div

class

=

“top”

>

標題欄

div

>

<

div

class

=

“body”

>

<

div

class

=

“body-left”

>

左邊導航欄

div

>

<

div

class

=

“body-main”

>

主內容，自動伸縮

div

>

<

div

class

=

“body-right”

>

右邊提示欄

div

>

div

>

<

div

class

=

“footer”

>

頁尾欄，使用flex佈局

div

>

div

>

body

>

html

>

編寫頁面使用

sublime text

的

Emmet

外掛，速度如飛。

輸入

html>head>style^body

游標放到行最後，按Ctrl+E，生成如下程式碼：

<

html

>

<

head

>

<

style

>

style

>

head

>

<

body

>

body

>

html

>

輸入

div。main>div。top+div。body+div。footer

按Ctrl+E生成如下程式碼

<

div

class

=

“main”

>

<

div

class

=

“top”

>

div

>

<

div

class

=

“body”

>

div

>

<

div

class

=

“footer”

>

div

>

div

>

爽！ Emmet 語法參考這裡：前端開發必備！Emmet使用手冊