flexDirection
flexDirection enum('row', 'column','row-reverse','column-reverse')
flexDirection屬性定義了父視圖中的子元素沿橫軸或側(cè)軸方片的排列方式。
* row: 從左向右依次排列
* row-reverse: 從右向左依次排列
* column(default): 默認(rèn)的排列方式,從上向下排列
* column-reverse: 從下向上排列
flexWrap
flexWrap enum('wrap', 'nowrap')
flexWrap屬性定義了子元素在父視圖內(nèi)是否允許多行排列答朋,默認(rèn)為
nowrap症概。
1. nowrap flex的元素只排列在一行上拉庶,可能導(dǎo)致溢出贤笆。
2. wrap flex的元素在一行排列不下時(shí)氯葬,就進(jìn)行多行排列。
justifyContent
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
justifyContent屬性定義了瀏覽器如何分配順著父容器主軸的彈性(flex)元素之間及其周圍的空間戈鲁,默認(rèn)為flex-start。
1. flex-start(default) 從行首開始排列嘹叫。每行第一個(gè)彈性元素與行首對(duì)齊婆殿,同時(shí)所有后續(xù)的彈性元素與前一個(gè)對(duì)齊。
2. flex-end 從行尾開始排列罩扇。每行最后一個(gè)彈性元素與行尾對(duì)齊婆芦,其他元素將與后一個(gè)對(duì)齊。
3. center 伸縮元素向每行中點(diǎn)排列。每行第一個(gè)元素到行首的距離將與每行最后一個(gè)元素到行尾的距離相同消约。
4. space-between 在每行上均勻分配彈性元素癌压。相鄰元素間距離相同。每行第一個(gè)元素與行首對(duì)齊荆陆,每行最后一個(gè)元素與行尾對(duì)齊滩届。
5. space-around 在每行上均勻分配彈性元素。相鄰元素間距離相同被啼。每行第一個(gè)元素到行首的距離和每行最后一個(gè)元素到行尾的距離將會(huì)是相鄰元素之間距離的一半帜消。
alignItems
alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
alignItems屬性以與justify-content相同的方式在側(cè)軸方向上將當(dāng)前行上的彈性元素對(duì)齊,默認(rèn)為stretch浓体。
1. flex-start 元素向側(cè)軸起點(diǎn)對(duì)齊泡挺。
2. flex-end 元素向側(cè)軸終點(diǎn)對(duì)齊。
3. center 元素在側(cè)軸居中命浴。如果元素在側(cè)軸上的高度高于其容器娄猫,那么在兩個(gè)方向上溢出距離相同。
4. stretch 彈性元素被在側(cè)軸方向被拉伸到與容器相同的高度或?qū)挾取?
alignSelf
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
alignSelf屬性以屬性定義了flex容器內(nèi)被選中項(xiàng)目的對(duì)齊方式生闲。注意:alignSelf 屬性可重寫靈活容器的 alignItems 屬性媳溺。
1. auto(default) 元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"碍讯。
2. stretch 元素被拉伸以適應(yīng)容器悬蔽。
3. center 元素位于容器的中心。
4. flex-start 元素位于容器的開頭捉兴。
5. flex-end 元素位于容器的結(jié)尾蝎困。
flex
flex number
flex 屬性定義了一個(gè)可伸縮元素的能力,默認(rèn)為0倍啥。
position
position enum('absolute', 'relative')屬性設(shè)置元素的定位方式禾乘,為將要定位的元素定義定位規(guī)則。
1. absolute:生成絕對(duì)定位的元素虽缕,元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定始藕。
2. relative:生成相對(duì)定位的元素,相對(duì)于其正常位置進(jìn)行定位彼宠。因此鳄虱,"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。
padding
1. padding number 內(nèi)邊距
2. paddingBottom number 下內(nèi)邊距
3. paddingHorizontal number 左右內(nèi)邊距
4. paddingLeft number 做內(nèi)邊距
5. paddingRight number 右內(nèi)邊距
6. paddingTop number 上內(nèi)邊距
7. paddingVertical number 上下內(nèi)邊距
margin
1. margin number 外邊距
2. marginBottom number 下外邊距
3. marginHorizontal number 左右外邊距
4. marginLeft number 左外邊距
5. marginRight number 右外邊距
6. marginTop number 上外邊距
7. marginVertical number 上下外邊距
width
width number
height
height number
border
1. borderBottomWidth number 底部邊框?qū)挾?2. borderLeftWidth number 左邊框?qū)挾?3. borderRightWidth number 右邊框?qū)挾?4. borderTopWidth number 頂部邊框?qū)挾?5. borderWidth number 邊框?qū)挾?6. border<Bottom|Left|Right|Top>Color 個(gè)方向邊框的顏色
7. borderColor 邊框顏色