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