彈性盒模型
彈性盒子是css3的一種新佈局模式，由容器（父元素）和專案（子元素）組成。
彈性盒子是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。
引入彈性盒模型的目的：提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白區間。
設定彈性盒子：display:flex或inline-flex; 區別：flex獨佔一行；inline-flex佔據自己應該佔據的位置，有點像inline-block，不支援margin:auto。
容器屬性
1.flex-direction 確定主軸和方向
- row 預設，從左到右
- row-reverse 從右到左
- column 從上到下
- column-reverse 從下到上
2.flex-wrap 規定專案是否換行
- nowrap 預設，不換行
- wrap 換行，交叉軸從上到下
- wrap-reverse 換行，第一行在下，交叉軸從下到上
3.flex-flow 複合屬性，flex-direction和flex-wrap組成的複合屬性
- row nowrap 預設，從左到右不換行
4.justify-content 專案在主軸上的對齊方式
- flex-start 預設，主軸起點對齊
- flex-end 主軸終點對齊
- center 主軸居中對齊
- space-between 主軸上專案兩端對齊，專案之間間隙平分空白
- space-around 主軸上的專案兩側間隔相等
5.align-content 多行專案在交叉抽（與主軸垂直）上的對齊方式，不要和align-items共存
- stretch 預設，不設定專案高度的時候，佔滿平分整個交叉軸
- flex-start 交叉軸起點對齊
- flex-end 交叉軸終點對齊
- center 交叉軸居中對齊
- space-between 交叉軸上專案兩端對齊，專案之間間隙平分空白
- space-around 交叉軸上專案兩側間隔相等
6.align-items 單行專案在交叉軸上的對齊方式
- stretch 預設，不設定高度（豎直時）或寬度(水平時)佔滿整個交叉軸
- flex-start 交叉軸的起點對齊
- flex-end 交叉軸的終點對齊
- center 交叉軸的中間對齊
- baseline 文字基線對齊
專案屬性
1.flex-grow 設定專案的擴大比例
- 0 預設，不擴大
- 1 專案擴大填滿容器，值為1時佔一份，值為2時佔兩份，不支援負值
2.flex-shrink 設定專案的收縮比例
- 1 預設，當容器寬度不夠時，專案等比例縮小
- 0 不縮小
- 2,3…n 值越大縮小得越多
3.flex-basis 設定專案初始長度
- auto 預設，專案沒有設定寬度的時候，預設內容撐開寬度
- 0 不設定初始值
- number 規定專案的初始長度
4.flex 複合寫法flex:flex-grow flex-shrink flex-basis
- auto 相當於1 1 auto
- none 相當於0 0 auto
- 1 相當於1 1 0
- initial 相當於0 1 auto
5.align-self 單獨控制交叉軸一個專案的對齊方式
- auto 預設值，繼承父容器的align-items
- 其他屬性值與align-items一樣
6.order 規定專案在主軸上的排列順序
- 0 預設，根據專案先後排列
- 整數，可為負值，數值越小排名越靠前
以上為個人理解，如有不當之處請指正！