1.?flex布局原理
為父盒子設(shè)置flex布局后，來控制子盒子的位置和排列方式，且子元素的float（浮動）、clear（清除浮動） 和 vertical-align（元素對齊方式） 屬性都將失效。此時容器中的直系子元素就會變?yōu)?b>flex 元素。所有CSS屬性都會有一個初始值，所以 flex 容器中的所有 flex 元素都會有下列行為：
元素排列為一行(flex-direction屬性的初始值是row)。
元素從主軸的起始線開始。
元素不會在主維度方向拉伸，但是可以縮小。
元素被拉伸來填充交叉軸大小。
flex-basis屬性為auto。
flex-wrap屬性為nowrap。
vertical-align屬性運(yùn)用（只對行內(nèi)和行內(nèi)塊元素有效）：
baseline：基線對齊
top：頂端對齊
middle：中部對齊
bottom：底線對齊
2.父項(xiàng)常見屬性（display：flex）
主軸：
主軸方向：flex-direction
row(默認(rèn)）從左到右
row-reverse 從右到左
column 從上到下
column-reverse 從下到上
主軸上子元素排列方式：justify-content
flex-start 從頭開始排列
flex-end 從尾開始排列
center 居中對齊
space-around 平分剩余空間
space-between 先兩邊貼邊，再平分剩余空間
子元素是否換行：flex-wrap
nowrap （默認(rèn)）不換行
wrap 換行
wrap-reverse：換行，第一行在下方。
側(cè)軸：
設(shè)置側(cè)軸上的排列方式（多行）：align-content
flex-start 從頭開始排列
flex-end 從尾開始排列
center 居中對齊
stretch 平分父元素高度
space-around 平分剩余空間
space-between?先兩邊貼邊，再平分剩余空間
側(cè)軸單行排列：align-items
flex-start 從上到下
flex-end 從下到上
center 垂直居中
stretch 拉伸（默認(rèn)）
復(fù)合屬性主軸方向+換行：flex-flow
eg:flex-flow:row wrap;
3.flex布局子項(xiàng)常見屬性
平分份數(shù)：flex：1；
控制子項(xiàng)自己在側(cè)軸上的排列方式：align-self
align-self 屬性允許單個項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋 align-items 屬性。（單獨(dú)設(shè)置）
定義項(xiàng)目的排列順序 ：order
數(shù)值越小，排列越靠前，默認(rèn)為0。
