（1） display：flex；給父容器新增這個屬性；
（2） display:flex; 容器新增彈性布局後，顯示為塊級元素；
display:inline-flex; 容器新增彈性布局後，顯示為行級元素；
（3） 設為 flex布局後，子元素的float、clear屬性將失效。但是position屬性，依然生效。
2、作用于父容器的5個屬性
（1）flex-direction屬性決定主軸的方向（即專案的排列方向）。
row（預設值）： 主軸為水平方向，起點在左端；
row-reverse： 主軸在水平方向，起點在右端 ；
column：主軸為垂直方向，起點在上沿；
column-reverse：主軸為垂直方向，起點在下沿。
（2）flex-wrap屬性定義，如果一條軸線排不下，如何換行。
nowrap（預設）：不換行。當容器寬度不夠時，每個專案會被擠壓寬度；
wrap： 換行，並且第一行在容器最上方；
wrap-reverse： 換行，並且第一行在容器最下方。
如下所示，使用彈性布局，橫向排列，起點在左邊，換行。
>彈性布局
title
>
9<
style
>
10.box
1718
.box div
24style
>
25head
>
2627
<
body
>
28<
div
class
="box"
>
29<
div>第乙個盒子
div>
30<
div>第二個盒子
div>
31<
div>第三個盒子
div>
32<
div>第四個盒子
div>
33<
div>第五個盒子
div>
34<
div>第六個盒子
div>
35<
div>第七個盒子
（3）justify-content屬性定義了專案在主軸上的對齊方式。這個屬性與主軸方向息息相關。
主軸方向為：row-起點在左邊，row-reverse-起點在右邊， column-起點在上邊，column-reverse-起點在下邊。
flex-start（預設值）： 專案位於主軸起點。
flex-end：專案位於主軸終點。
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。(開頭和最後的專案，與父容器邊緣沒有間隔)
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。(開頭和最後的專案，與父容器邊緣有一定的間隔)
space-evenly：每個專案兩側的間隔相等。所以，專案之間的間隔和專案與邊框的間隔相同。
第一張圖是space-between的效果，第二張圖是space-around的效果，第三張圖是 space-evenly的效果。
（4）align-items屬性定義專案在交叉軸上如何對齊。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。(文字的行高、字型大小會影響每行的基線)
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
（5）align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
(當專案換為多行時，可使用align-content取代align-items)
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。
HTML的彈性布局用法
彈性布局是html中十分方便的乙個布局，它可以讓結構中的內容自適應不同的解析度，簡化了許多繁瑣的 今天就簡單來介紹一下彈性布局的用法。彈性布局 display flex 顧名思義，就是讓內容變得像彈簧一樣具有彈性，在需要內容自適應的結構中，它是乙個極其方便的工具，它分為主軸和側軸兩個軸，就像x軸跟y...
html5 彈性布局一
1.彈性布局，解決高度塌陷的問題 2.彈性布局只對他的直接子元素控制，子元素的子元素不控制 3.彈性布局有主軸概念，當x軸為主軸，y為側軸，預設主軸的方向從左到右。flex direction row row reverse 從左到右 從右到左 當y軸為主軸時側軸為x軸，預設方向是從上到下。flex...
html頁面布局之flex彈性盒子
flexbox 布局 flexible box 意在提供乙個更為有效的方式來進行布局 對齊和分配乙個容器內元素之間的空間，即使他們的大小是未知的或者動態的。flex布局的主要思想是，讓容器能夠改變它的子元素的寬度 高度 甚至順序 從而更好地填充可用的空間 主要是為了適應所有種類的裝置和螢幕大小 最重...