react-native筆記(flexbox)

flexbox簡潔

FlexBox也叫彈性盒佈局,在FlexBox彈性佈局中，容器會根據須要調整條目的尺寸和順序，填充空間。FlexBox主要有伸縮容器和伸縮項目組成。

FlexBox伸縮容器屬性

display:flex|inline-flex 指定是否用彈性盒模型
flex-direction:row|row-reverse|column|column-reverse 控制伸縮容器在主軸的方向
flex-wrap:wrap|nowrap|wrap-reverse 用來控制是單行仍是多行，默認值nowrap,單行
flex-flow:[flex-direction][flex-wrap]
justify-content:flex-start|flex-end|center|space-between|space-around 主軸的對齊方式
align-items:flex-start|flex-end|center|baseline|stretch在側軸的對齊方式
align-content:flex-start|flex-end|center|space-between|space-around|stretch主軸方向伸縮行的對齊方式

FlexBox伸縮項目屬性

order:定義項目的排列順序，數值越小越靠前
flex:flex-grow(擴展比例) flex-shrink(收縮比例) flex-basis(伸縮基準)
align-self:auto|flex-start|flex-end|center|baseline|stretch 設置單獨的伸縮項目在交叉軸上的對齊方式

在react-native中的應用

flex:number
flexDirection:row|column
alignItems
alignSelf
flexWrap justifyContent