ReactNative初体验flex篇(一)

一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。

参考官方文档：https://reactnative.cn/docs/flexbox
备注：1.flex内部可多层嵌套。2.felx总高度固定，子选项超出则顶出去不会影响flex容器变化。3.felx高度不确定时，会选择高度最高的子选择高度撑开。
(1)felx example：

const Flex = () => { 
       return ( 
            <View style={ { 
                 // Try setting `flexDirection` to `"row"`. 
                 flexDirection: "column", 
                 flex: 1, 
                 padding: 20, 
               }}> 
                <View style={{ flex: 1, backgroundColor: "red" }} /> 
                <View style={{ flex: 2, backgroundColor: "darkorange" }} />
                <View style={{ flex: 3, backgroundColor: "green" }} />
            </View>
                 )
            };

           export default Flex

column预览：

row预览：