React Native佈局（flexbox）

React Native佈局

flexbox是有伸縮容器和伸縮專案組成。任何一個元素都可以指定flexbox佈局，伸縮容器的子元素可以稱為伸縮專案。伸縮專案使用伸縮佈局模型來排版。在預設情況下，伸縮容器有兩根軸組成：主軸（main axis）和交叉軸（cross axis）,主軸開始的位置叫main stat,結束的位置叫main end。交叉軸開始的位置叫cross start，結束的位置叫cross end。伸縮專案在主軸上佔的空間叫main size。在交叉軸上佔據的空間叫cross size。

React Native佈局

(1)flexDirection改變主軸方向

const styles = StyleSheet.create({

     container:{

             flexDirection:'row'//預設主軸水平方向

             //flexDirection:'column'  主軸縱向方向

      }

})

(2)flexWrap水平折行

const styles = StyleSheet.create({

        container:{

               flexDirection:'row', //預設主軸水平方向

               flexWrap:'wrap'      //預設nowrap 不折行

      }

})

(3)justifyContent定義伸縮專案沿主軸線對齊方式

const styles = StyleSheet.create({

     container:{

           flexDirection:'row', //預設主軸水平方向

            justifyContent:'flex-start'  //從左向右排列

           //justifyContent:'flex-end'   //從右向左排列

          //justifyContent:'center'   //主軸線中心排列

         //justifyContent:'space-between'  //從主軸線兩邊開始排列

        //justifyContent:'space-around'   //均分排列

    }

})

(4)alignItems定義交叉軸關係

const styles = StyleSheet.create({

    container:{

         flexDirection:'column',  主軸縱向方向

         alignItems:'flex-start' //預設交叉軸左邊對齊

         //alignItems:'flex-end' //交叉軸右邊對齊

        // alignItems:'center' //交叉軸中心對齊

        // alignItems:'streach' //沒有明顯效果

  }

})

(5)flex（數值型屬性值）用於收縮專案儘可能向右擴充套件

   style={flex:1}