Flexbox总结

2018-11-27  本文已影响0人  烂吹笙

Flexbox弹性布局是React Native中的布局,功能丰富,能够满足页面大量的排版需求。RN的FlexBox和Html5的差别不大,原理基本相同。

它拥有三个属性 flexDirectionjustifyContentalignItems

flexDirection

flexDirection是确定子元素的主轴方向,是沿着水平轴还是垂直轴排列,默认值是column。

有四个属性值:

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

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // 尝试把`flexDirection`改为`column`看看
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'green'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
      </View>
    );
  }
};

justifyContent

justifyContent是确定子元素在主轴上的对齐方式

有下面几个属性值:

<View style={{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
}}>
    <View style={{width: 50, height: 50, backgroundColor: 'red'}}/>
    <View style={{width: 50, height: 50, backgroundColor: 'green'}}/>
    <View style={{width: 50, height: 50, backgroundColor: 'blue'}}/>
</View>

alignItems

alignItems是与主轴垂直的轴的对齐方式

有下面几个属性值:

<View style={{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: "stretch"
}}>
    <View style={{width: 50, height: 200, backgroundColor: 'red'}}/>
    <View style={{width: 50, height: 200, backgroundColor: 'green'}}/>
    <View style={{width: 50, height: 200, backgroundColor: 'blue'}}/>
</View>

说了这麽多,这不是LinearLayout和RelativeLayout的结合体吗

上一篇 下一篇

猜你喜欢

热点阅读