ReactNative: Flexbox布局

Flex 布局是FlexBox布局的簡寫，意為“彈性布局”。ReactNative中的Flexbox布局工作原理和Web上的CSS中基本一致，只有少許差異。例如：flexDirection默認的是 column 而不是 row 。

容器的屬性

FlexDirection

flex-direction 屬性決定主軸方向。取值： row , row-reverse , column , column-reverse 。

在ReactNative默認： column 。CSS中默認為： row 。

• column(ReactNative默認值)：主軸為垂直方向，起點在上端。
• column-reverse: 與column相反。
• row: 主軸水平方向，起點在左端。
• row-reverse: 與row相反。

justify-content屬性

justify-content 定義子項目在主軸上的對齊方式。取值： flex-start , flex-end , center , space-between , space-around 。

• flex-start（默認值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊，項目之間的間隔都相等。
• space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

align-items

align-items 屬性定義項目在交叉軸上如何對齊。取值： flex-start , center , flex-end 和 stretch 。

注意：使用 stretch 時，子元素在次軸上不能夠固定高度。

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

flex-warp

flex-warp 默認情況下，元素是排列在一條線上的，當排不開則自動換行。取值： nowrap , wrap 和 wrap-reverse 。

• nowrap : （默認）不換行
• wrap: 換行，第一行在上面。
• wrap-reverse: 換行，第一行在下面。

小結

本文介紹了 Flexbox 幾個常用的屬性。

來自：https://jesuslove.github.io/2016/12/13/ReactNative-Flexbox布局/