flex，是flexible box的簡稱，意為彈性布局，在rn中是用來描述子元件在父元件中的對齊方式和相對位置，使其能夠適應不同的螢幕，為介面布局帶來更大的靈活性。
flex布局由flex container 和flex item組成。flex container分為主軸（main axis）和交叉軸（across axis）。主軸預設是豎直方向。
flex
flex為彈性容器的屬性，在css3中由flex-grow、flex-shrink、flex-basis三個屬性組合起來，其中後面兩個是可選引數。在rn中flex預設為flexgrow屬性。
flexdirection
flexdirection屬性為主軸方向，取值為column、column-reverse、row、row-reverse。預設值為column。
flexwrap
flexwrap表示沿主軸方向放不下是否需要換行。取值為：wrap、nowrap，預設值為wrap。
flexwrap屬性值對比圖（其中`flexdirection: 'row'`）
justifycontent
justifycontent表示容器中的子元件在主軸方向上的對齊方式，取值為flex-start、flex-end、center、space-between、space-around，預設值為flex-start。
justifycontent屬性值對比圖（其中`flexdirection: 'row'`）
alignitems
alignitems表示容器中子元件在交叉軸方向上的對齊方式，取值為：flex-start、flex-end、center、stretch、baseline，預設值為flex-start。
alignitems屬性值對比圖（其中`flexdirection: 'row'`）
aligncontent
aligncontent定義了多根軸線時，交叉軸方向的對齊方式，如果只有一根軸，該屬性是沒有效果的。取值為：flex-start、flex-end、center、space-between、space-around、stretch。預設值為flex-start。
aligncontent屬性值對比圖（其中`flexdirection: 'row'`）
alignself
alignself定義了子元件自身對齊方式，該屬性會覆蓋父元件的alignitems屬性。取值為：auto、flex-start、flex-end、center、stretch，預設值為auto。
alignself屬性值對比圖（其中父元件`flexdirection: 'row'`）
入門react native flex布局
一 flex屬性 1.1 flex父檢視屬性 1.1.1 flexdirection 定義view的主軸方向，在這個view下面的子元素會沿著主軸方向排列，可選方式 row 從左向右依次排列 row reverse 從右向左依次排列 column default 預設的排列方式，從上向下排列 col...
React Native flex 布局使用總結
父檢視屬性 容器屬性 flexdirection 對子布局方向的設定 row 從左到右依次排列 row reverse 從右向左依次排列 column default 從上到下排列 column reverse 從下到上排列 複製 flexwrap 定義子布局是否在父布局中多行排列 wrap 允許多...
5分鐘吃透React Native Flexbox
今天我們來聊聊flexbox，它是前端的乙個布局方式。在react native中是主流布局方式。如果你剛剛入門react native，或者沒有多少前端的技術經驗，亦或者對其半知半解，那麼這篇文章將很好的幫助你參透flexbox的整個全貌。通過這篇文章你將快速吃透整個flexbox，因為對於fle...