寫在容器上（容器屬性）
flex-direction：定義內部的排列方向（確定主軸）
值：(1)row：預設，水平方向，從左到右
(2)row-reverse：水平方向，從右到左
(3)column：顯示為列，垂直方向（從上到下）
(4)column-reverse：顯示為列，垂直方向（從下到上）
justify-content：定義子元素在主軸上的對齊方式。
值：(1)flex-start：起始位置對齊（預設）
(2)flex-end：結束位置對齊（主軸最後對齊）
(3)center：表現為居中對齊
(4)space-between：表現為兩端對齊（中間剩餘空間等分給每乙個元素）
(4)space-around：每個子專案兩側間隔相等。
(5)space-evenly：均勻，平等對齊，每個子項兩側空白間距相等
align-items：定義子元素在交叉軸（側軸）方向上的對齊方式。
值：(1)stretch：預設，在子元素不設定高度的情況下，預設子元素高度和容器相等
(2)flex-start：容器頂部對齊
(3)flex-end：容器底部對齊
(4)center：垂直居中對齊
(5)baseline：基線對齊
flex-wrap：定義子元素整體單行顯示還是換行顯示。
值：(1)nowrap：不換行（預設），一行放不下自動縮小子元素
(2)wrap：寬度不足換行顯示。第二行在第一行下面
(3)wrap-reverse：寬度不足換行顯示，第二行在第一行上面
寫在子項上（專案屬性）
order屬性：定義專案的排序，order值越大排列越靠後，預設值為0
flex-grow屬性：定義專案的放大比例，預設為0，即若存在剩餘空間，也不放大
可選值：number
注意：
（1）預設值0,有剩餘空間不分配
（2）如果元素的值都是1，剩餘的大小平均分配給每乙個元素
（3）如果都是1其實有乙個值是2，值是2的元素所分配的空間是其它的2倍
flex-shrink屬性：定義專案的縮小比例，預設為1，即如果空間不足，該專案將縮小
可選值：number
注意：如果專案flex-shrink都為1，空間不足時，等比例縮小。如果乙個為0，其餘為1，空間不足時，前者不縮小，負值對改屬性無效
align-self：某乙個子元素交叉軸的對齊方式,和align-item屬性作用相同
值：(1)flex-start：容器頂部對齊
(2)flex-end：容器底部對齊
(3)center：垂直居中對齊
(4)baseline：基線對齊
(5)stretch：預設
flex 屬性用於設定或檢索彈性盒模型物件的子元素如何分配空間。
一般使用flex:1; 設定子元素平分容器的大小
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。
預設值：0 1 auto
flex-basis: 設定彈性盒子的初始大小
css3彈性盒子 flex布局
1 display flex 說明 設定為彈性盒 父元素新增 2 flex direction 主軸排列方式 說明 順序指定了彈性子元素在父容器中的位置 row 預設在一行內排列 row reverse 反轉橫向排列 右對齊，從後往前排，最後一項排在最前面。column 縱向排列。column re...
CSS3彈性盒子flex布局方式
一 css3彈性盒子 css3 彈性盒子 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的 提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。二 css3 彈性盒子內容 彈性盒子由彈性容器 和彈性子元素組成。彈性容器通...
Css3 彈性盒子布局
1 flex direction 指定了彈性容器中子元素的排列方式 row 橫向從左到右排列 左對齊 預設的排列方式 row reverse 反轉橫向排列 右對齊，從後往前排，最後一項排在最前面 column 縱向排列 column reverse 反轉縱向排列，從後往前排，最後一項排在最上面。2 ...