推薦參考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
父容器
justify-content 決定item在主軸（水平方向）上的對(duì)齊方式
1. 位置排列：
flex-end:右對(duì)齊
flex-start:左對(duì)齊
center：居中對(duì)齊
2.分布排列：
space-around:沿軸線(xiàn)均勻分布
space-between：兩端對(duì)齊
align-items 決定item 在交叉軸（垂直方向）的對(duì)齊方式
3.位置排列
flex-start:頂端對(duì)齊
flex-end:底部對(duì)齊
center:豎直方向上居中對(duì)齊
基線(xiàn)排列
baseline:item的第一行文字的底部對(duì)齊（備注：給第一個(gè)元素添加padding-top可以看出效果）
拉伸排列
stretch:當(dāng)item未設(shè)置高度時(shí)旺上，item將和等高對(duì)齊（備注：如果你的元素本身有高度告希，看不出來(lái)效果，你需要吧子容器的高度去掉芬沉，就會(huì)拉伸和父容器一致）
子容器
在主軸上如何伸縮：flex(備注：flex是flex-grow|flex-shink|flex-basis的縮寫(xiě))
flex-grow屬性定義項(xiàng)目的放大比例妖混，默認(rèn)為0少漆，即如果存在剩余空間 也不放大
flex-shink屬性定義了項(xiàng)目的縮小比例厅须，默認(rèn)為1，即如果空間不足危尿，將該項(xiàng)目縮小呐萌。注意：數(shù)字是往大了調(diào)，負(fù)值對(duì)該屬性無(wú)效脚线。
flex-basis屬性定義了在分配多余空間之前搁胆，項(xiàng)目占據(jù)的主軸空間（mainsize）弥搞。瀏覽器根據(jù)這個(gè)屬性邮绿，計(jì)算主軸是否有多余空間，他的默認(rèn)值是auto攀例，即項(xiàng)目原來(lái)的大小船逮。
默認(rèn)是0 1 auto，后兩個(gè)屬性可選粤铭。
單獨(dú)設(shè)置子容器如何沿交叉軸排列：align-self（備注：align-self允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式）
1.位置排列
flex-start:頂端對(duì)齊
flex-end:底部對(duì)齊
center:豎直方向上居中對(duì)齊
2.基線(xiàn)排列
baseline:item的第一行文字的底部對(duì)齊（備注：給第一個(gè)元素添加padding-top可以看出效果）
3.拉伸排列
stretch:當(dāng)item未設(shè)置高度時(shí)挖胃，item將和等高對(duì)齊（備注：如果你的元素本身有高度，看不出來(lái)效果梆惯，你需要吧子容器的高度去掉酱鸭，就會(huì)拉伸和父容器一致）
