react-native 就下面四種 flex 屬性控制布局
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
},
item: {
backgroundColor: '#4385f5',
color: 'white',
textAlign: 'center',
fontSize: 50,
lineHeight: 100,
width: 100,
height: 100,
margin: 5,
},
//flexDirection（主軸）
//column（默認(rèn) 從上向下）| column-reverse | row | row-reverse
box_flexDirection: {
flexDirection: 'column'
},
//justifyContent（描述子盒子之間的距離）
//flex-start（默認(rèn) 從右邊開(kāi)始）| flex-end | center | space-between（兩端靠邊帖烘，項(xiàng)目之間間距相等）| space-around（每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等）
//需要 item 寬高調(diào)整小一些翎苫，才可以看見(jiàn)效果
box_justifyContent: {
justifyContent: 'flex-start',
flexDirection: 'row',
},
//flexWrap （描述一行排滿是否換行）
//nowrap（默認(rèn) 不換行）| wrap
box_flexWrap: {
flexWrap: 'wrap',
flexDirection: 'row',
},
//alignItems（用于描述交叉軸（又名 側(cè)軸））
//flex-start（默認(rèn)）| flex-end | center | baseline（第一行字體對(duì)齊）| stretch（側(cè)軸方向撐滿）
box_alignItems: {
alignItems: 'flex-start'
},
});
GitHub: https://github.com/liangtongzhuo/react_native_flex
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
