React native layout with flexbox

flex 基本上就是填充
https://facebook.github.io/react-native/docs/height-and-width.html#content

flexDirection 就是主要的方向，如果是橫向就是 row 縱向就是 column, default 是 column

justifyContent 就是根據主要方向（flexDirection）分佈元件的方式，Available options are flex-start, center, flex-end, space-around, and space-between.

space-between：在元件之間安插一樣長的空白區塊
space-around：在元件旁邊安插一樣長的空白區塊，跟 space-between 不同的是 space-around 即使是最外圍的元件的外側也會安插空白區塊
flex-start：放在 flex direction 的前端
flex-end：放在 flex direction 的後端
center：放在 flex direction 的中間

alignItems 則是根據次要方向（flexDirection 的相反）排列元件的方法，Available options are flex-start, center, flex-end, and stretch.
flex-start, center, flex-end 就不用多做解釋了，如果 flexDirection 是 column 而 alignItems 是 center 代表水平置中，flex-end 代表靠右
stretch 則代表延展，如果元件本身沒有設定次要方向的長度的話就把次要方向延展至底，例如 flexDirection 是 column 的情況下不設元件的 width 就會將元件平行拉長到底


https://facebook.github.io/react-native/docs/flexbox.html#content