彈性盒子佈局常用屬性

display : flex 聲明當前容器時彈性容器 （預設從左到右子元素水平排列）

flex-direction : row 從左到右排列 （主軸水平）

flex-direction: row-reverse 從右到左排列（主軸水平）

flex-direction: column 從上到下排列 （主軸垂直）

flex-direction : column-reverse 從下到上排列（主軸垂直）

flex-wrap : nowrap 不換行

flex-wrap : wrap 換行

flex-wrap : warp-reverse 從下到上（第一行在下方）

justify-content : flex-start 左對齊

justify-content : flex-end 右對齊

justify-content : center 居中

justify-content : space-between平均分開

justify-content : space-around 兩邊有空格

order 整數，越小越靠前，預設為0

align-items : flex-end 垂直

flex-grow : 擴張因子，預設為0

flex-shrink : 收縮因子，預設為1

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

align-self: flex-end 元素位於容器的結尾。

較詳細演算法參考

參考https://www.jianshu.com/p/8c2f384576af