CSS3中的flexbox口诀

最新推荐文章于 2021-08-20 21:05:14 发布

spicyboiledfish

最新推荐文章于 2021-08-20 21:05:14 发布

阅读量749

点赞数 2

分类专栏： React Native 文章标签： React Native

本文链接：https://blog.csdn.net/SpicyBoiledFish/article/details/58601942

版权

React Native 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

参考文档：简易布局理解

注意两点：1. flexDirection的默认值是column，而不是row；

2. flex只能指定一个数字值。

flexDirection:决定布局的主轴，alignItems:沿着次轴的排列方式，justifyContent:沿着主轴的排列方式。

当flexDirection是column，相当于y轴，则alignItems就是沿着x轴的排列方式，justifyContent就是沿着y轴的排列方式。

案例：

import React, {Component} from 'react'
import {View} from 'react-native'

export default class AlignItems extends Component{
    render(){
        return(
            <View style={{flex:1,flexDirection:'column',justifyContent:'flex-end',alignItems:'flex-start'}}>
                <View style={{width:50,height:100,backgroundColor:'powderblue'}}></View>
                <View style={{width:50,height:100,backgroundColor:'skyblue'}}></View>
                <View style={{width:50,height:100,backgroundColor:'steelblue'}}></View>
            </View>
        );
    }
}