React Native 中的Flex使用

React Native中的FlexBox 和Web CSSS上FlexBox的不同之處

• 1.flexDirection: React Native中默認(rèn)為flexDirection:'column',在Web CSS中默認(rèn)為flex-direction:'row'

• alignItems: React Native中默認(rèn)為alignItems:'stretch'，在Web CSS中默認(rèn)align-items:'flex-start'

• flex: 相比Web CSS的flex接受多參數(shù)，如:flex: 2 2 10%;，但在 React Native中flex只接受一個(gè)參數(shù)

• 不支持屬性：align-content，flex-basis，order，flex-basis，flex-flow，flex-grow，flex-shrink
  以上是React Native中的FlexBox 和Web CSSS上FlexBox的不同之處，記住這幾點(diǎn)，你可以像在Web CSSS上使用FlexBox一樣，在React Native中使用FlexBox

父視圖屬性(容器屬性)：

主軸，測(cè)軸

• flexDirection enum(‘row’, ‘column’,’row-reverse’,’column-reverse’) // 主軸

  屬性定義了父視圖中的子元素沿橫軸或側(cè)軸方片的排列方式。

  • row: 從左向右依次排列
  • row-reverse: 從右向左依次排列
  • column(default): 默認(rèn)的排列方式，從上向下排列
  • column-reverse: 從下向上排列

• flexWrap enum(‘wrap’, ‘nowrap’)

  屬性定義了子元素在父視圖內(nèi)是否允許多行排列，默認(rèn)為nowrap。

  • nowrap flex的元素只排列在一行上，可能導(dǎo)致溢出。
  • wrap flex的元素在一行排列不下時(shí)，就進(jìn)行多行排列。

• justifyContent enum(‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)

  屬性定義了瀏覽器如何分配順著父容器主軸的彈性（flex）元素之間及其周?chē)目臻g，默認(rèn)為flex-start。

  • flex-start(default) 從行首開(kāi)始排列。每行第一個(gè)彈性元素與行首對(duì)齊，同時(shí)所有后續(xù)的彈性元素與前一個(gè)對(duì)齊。
  • flex-end 從行尾開(kāi)始排列。每行最后一個(gè)彈性元素與行尾對(duì)齊，其他元素將與后一個(gè)對(duì)齊。
  • center 伸縮元素向每行中點(diǎn)排列。每行第一個(gè)元素到行首的距離將與每行最后一個(gè)元素到行尾的距離相同。
  • space-between 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個(gè)元素與行首對(duì)齊，每行最后一個(gè)元素與行尾對(duì) - 齊。
  • space-around 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個(gè)元素到行首的距離和每行最后一個(gè)元素到行尾的距離將會(huì)是相鄰元素之間距離的一半。

• alignItems enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’) // 側(cè)軸

  屬性以與justify-content相同的方式在側(cè)軸方向上將當(dāng)前行上的彈性元素對(duì)齊，默認(rèn)為stretch。

  • flex-start 元素向側(cè)軸起點(diǎn)對(duì)齊。
  • flex-end 元素向側(cè)軸終點(diǎn)對(duì)齊。
  • center 元素在側(cè)軸居中。如果元素在側(cè)軸上的高度高于其容器，那么在兩個(gè)方向上溢出距離相同。
  • stretch 彈性元素被在側(cè)軸方向被拉伸到與容器相同的高度或?qū)挾取?strong>交叉軸上沒(méi)有設(shè)置高度（水平flexDirection=row 沒(méi)有設(shè)置height,豎直flexDirection=column 沒(méi)有設(shè)置width

子視圖屬性

• alignSelf enum(‘a(chǎn)uto’, ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)

  屬性以屬性定義了flex容器內(nèi)被選中項(xiàng)目的對(duì)齊方式。注意：alignSelf 屬性可重寫(xiě)靈活容器的 alignItems 屬性。

  • auto(default) 元素繼承了它的父容器的 align-items 屬性。如果沒(méi)有父容器則為 “stretch”。
  • stretch 元素被拉伸以適應(yīng)容器。
  • center 元素位于容器的中心。
  • flex-start 元素位于容器的開(kāi)頭。
  • flex-end 元素位于容器的結(jié)尾。

• flex number

  屬性定義了一個(gè)可伸縮元素的能力，默認(rèn)為0

其他布局

視圖邊框

• borderBottomWidth number 底部邊框?qū)挾?/li>
• borderLeftWidth number 左邊框?qū)挾?/li>
• borderRightWidth number 右邊框?qū)挾?/li>
• borderTopWidth number 頂部邊框?qū)挾?/li>
• borderWidth number 邊框?qū)挾?/li>
• border<Bottom Left Right Top>Color 個(gè)方向邊框的顏色
• borderColor 邊框顏色

尺寸

• width number
• height number

外邊距

• margin number 外邊距
• marginBottom number 下外邊距
• marginHorizontal number 左右外邊距
• marginLeft number 左外邊距
• marginRight number 右外邊距
• marginTop number 上外邊距
• marginVertical number 上下外邊距

內(nèi)邊距

• padding number 內(nèi)邊距
• paddingBottom number 下內(nèi)邊距
• paddingHorizontal number 左右內(nèi)邊距
• paddingLeft number 做內(nèi)邊距
• paddingRight number 右內(nèi)邊距
• paddingTop number 上內(nèi)邊距
• paddingVertical number 上下內(nèi)邊距

邊緣

• left number 屬性規(guī)定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
• right number 屬性規(guī)定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移
• top number 屬性規(guī)定元素的頂部邊緣。該屬性定義了一個(gè)定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
• bottom number 屬性規(guī)定元素的底部邊緣。該屬性定義了一個(gè)定位元素的下外邊距邊界與其包含塊下邊界之間的偏移。

定位

• position enum(‘a(chǎn)bsolute’, ‘relative’)

  屬性設(shè)置元素的定位方式，為將要定位的元素定義定位規(guī)則。

  • absolute：生成絕對(duì)定位的元素，元素的位置通過(guò) “l(fā)eft”, “top”, “right” 以及 “bottom” 屬性進(jìn)行規(guī)定。
  • relative：生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。因此，”left:20” 會(huì)向元素的 LEFT 位置添加 20 像素。

• 參考