Flex布局
display:flex 指定當前盒子為伸縮盒
flex-direction:column 把盒子內容垂直從上往下排列
row 把盒子內容垂直從左往右排列
flex-wrap: wrap; 如果內容放不下就會換行排列，類似浮動
justify-content: space-between; 水平對齊方式
align-items:center; 垂直對齊方式 對齊方式（頂部，底部，中間，基線對齊）
---------------------------------------------------------------------------------------------------------
flex： 是作用於子元素占據父盒子寬高的比例
避免dispaly:flex; 和flex: 0 1 auto;寫到同一個盒子身上
---------------------------------------------------------------------------------------------------------
開發的時候圖片寧願被裁切也不要被變形
image標簽的
縮放 scaleToFill 不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
縮放 aspectFit 保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
縮放 aspectFill 保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。
縮放 widthFix 寬度不變，高度自動變化，保持原圖寬高比不變
---------------------------------------------------------------------------------------------------------
推薦鏈接：
阮一峰：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
菜鳥教程：http://www.runoob.com/w3cnote/flex-grammar.html 也是阮一峰寫的