主軸和側(cè)軸(橫軸和豎軸)
1眶明、React Native中的FlexBox 和Web CSSS上FlexBox的不同之處惩坑？
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只接受一個參數(shù)
不支持屬性：
align-content擎颖，flex-basis榛斯，order，flex-basis搂捧，flex-flow驮俗，flex-grow，flex-shrink
2允跑、父視圖屬性(容器屬性)
-
flexDirection('row', 'column','row-reverse','column-reverse') -
flexWrap('wrap', 'nowrap') -
justifyContent('flex-start', 'flex-end', 'center', 'space-between', 'space-around') -
alignItems('flex-start', 'flex-end', 'center', 'stretch')
詳解：
flexDirection
- row: 從左向右依次排列
- row-reverse: 從右向左依次排列
- column(default): 默認(rèn)的排列方式王凑，從上向下排列
- column-reverse: 從下向上排列
flexWrap
定義了子元素在父視圖內(nèi)是否允許多行排列，默認(rèn)為nowrap聋丝。
- nowrap flex的元素只排列在一行上历恐，可能導(dǎo)致溢出吞加。
- wrap flex的元素在一行排列不下時，就進(jìn)行多行排列。
justifyContent 類似android gravity屬性
justifyContent屬性定義了瀏覽器如何分配順著父容器主軸的彈性（flex）元素之間及其周圍的空間翎迁，默認(rèn)為flex-start凰狞。
- flex-start(default) 從行首開始排列昆婿。每行第一個彈性元素與行首對齊，同時所有后續(xù)的彈性元素與前一個對齊
- flex-end 從行尾開始排列端圈。每行最后一個彈性元素與行尾對齊，其他元素將與后一個對齊子库。
- center 伸縮元素向每行中點(diǎn)排列舱权。每行第一個元素到行首的距離將與每行最后一個元素到行尾的距離相同。
- space-between 在每行上均勻分配彈性元素仑嗅。相鄰元素間距離相同宴倍。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊
- space-around 在每行上均勻分配彈性元素仓技。相鄰元素間距離相同鸵贬。每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半。
alignItems 類似在android relative 布局中的子元素align_botome……屬性（底對齊脖捻、頂部對齊）
alignItems屬性以與justify-content相同的方式在側(cè)軸方向上將當(dāng)前行上的彈性元素對齊阔逼，默認(rèn)為stretch
- flex-start 元素向側(cè)軸起點(diǎn)對齊。
- flex-end 元素向側(cè)軸終點(diǎn)對齊地沮。
- center 元素在側(cè)軸居中嗜浮。如果元素在側(cè)軸上的高度高于其容器，那么在兩個方向上溢出距離相同摩疑。
- stretch 彈性元素被在側(cè)軸方向被拉伸到與容器相同的高度或?qū)挾取?/li>
總結(jié)1：在父布局使用使用flexDirection：'column' 時justifyContent屬性不起作用危融，alignItems可實(shí)現(xiàn)左中右。
3雷袋、子視圖屬性
-
alignSelf('auto', 'flex-start', 'flex-end', 'center', 'stretch')相當(dāng)于android layout_gravity屬性 -
flexnumber 相當(dāng)于android layout_weight屬性
alignSelf屬性以屬性定義了flex容器內(nèi)被選中項(xiàng)目的對齊方式吉殃。注意：alignSelf 屬性可重寫靈活容器的 alignItems 屬性。
- auto(default) 元素繼承了它的父容器的 align-items 屬性片排。如果沒有父容器則為 "stretch"寨腔。
- stretch 元素被拉伸以適應(yīng)容器速侈。
- center 元素位于容器的中心率寡。
- flex-start 元素位于容器的開頭。
- flex-end 元素位于容器的結(jié)尾倚搬。
4冶共、其他布局 in React Native
視圖邊框
- 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 個方向邊框的顏色
- 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ī)定元素的頂部邊緣捅僵。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移
- bottom number 屬性規(guī)定元素的底部邊緣。該屬性定義了一個定位元素的下外邊距邊界與其包含塊下邊界之間的偏移
定位(position)
position enum('absolute', 'relative')屬性設(shè)置元素的定位方式眨层，為將要定位的元素定義定位規(guī)則庙楚。
- absolute：生成絕對定位的元素，元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定趴樱。
- relative：生成相對定位的元素馒闷，相對于其正常位置進(jìn)行定位酪捡。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素
’纳账、
‘
