Flex佈局  又稱(彈性佈局)是W3C組織在2009年提出的一個新的佈局方案，其宗旨是讓頁面的樣式佈局更加簡單，並且可以很好地支援響應式佈局,主要作用在容器上
flex-direction: 該屬性的值確定主軸的方向，軸有兩個方向，分別是水平和垂直
首次，設定display:flex; 讓Flex佈局生效
flex-direction:row; 主軸水平，方向為自左向右
flex-direction:row-reverse; 主軸水平，方向為自右向左
flex-direction:column;主軸垂直，方向自上而下
flex-direction:column-reverse;

自適應單位rpx簡介

rpx   可以使元件自適應螢幕的高度和寬度  px 則不會
移動解析度
px 物理解析度   pt 邏輯解析度
iphone 6 的寬度750個物理畫素為標準，只有在此尺寸下 1物理畫素=1rpx=0.5px

如圖以iphone 6舉例，水平方向有375個邏輯畫素點，垂直方向有667個邏輯畫素點
1pt=2px