React-native学习-5-使用Flexbox布局

//5.使用Flexbox布局

//flex:决定元素在主轴上如何填满可用区域

//flexDirection:决定布局的主轴方向    水平轴(row)方向排列 竖直轴(column)方向排列  默认值是竖直轴(column)方向。

//justifyContent:决定其子元素沿着主轴的排列方式: flex-start(主轴的起始端)、center(子元素全显示在中间)、flex-end(主轴末尾段)、space-around（每个子元素周围相同空格）

//space-between（前后中间各一个子元素）以及space-evenly（主轴均匀分布）

//alignItems:决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式    :flex-start、center、flex-end以及stretch（拉升：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸）

 

import React, { useState } from 'react';

import { View } from 'react-native';

 

const FlexboxDemo = () => {

    return (

        <View style={{flex:1,flexDirection:'column',justifyContent:'space-evenly',alignItems:'stretch'}}>

            <View style={{ width: 50, height: 50, backgroundColor: 'powderblue'}} />

            <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />

            <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />

        </View>

    );

}

 

export default FlexboxDemo;