只怕顺着竖直轴(column)方向排列

简单来说Flexbox是属于web前端领域CSS的一种布局方案,FlexBox类似android开发中的LinearLayout(线性布局)

正文只介绍重点的多少个属性,别的类似marginLeft、padding等,无论你此前是做网页开发,还是做原生开发,应该都熟能生巧,所以那里不做过多表明,大家有个别尝试看一下成效就知道了。此外,越来越多属性接济请查看合法文书档案

flex

flex 属性定义了1个可伸缩成分的力量(flex的属性值大于0的时候才可伸缩)。

flex: number

设若父元素唯有一个子成分设置 flex的值,平时flex:一,
钦点该子成分扩大以洋溢全部盈余空间。
借使有三个子成分都安装了flex值,则依据flex的值的比值,瓜分全体盈余空间。
举个大约的例证:A、B、C四个因素,其flex的值分别为一,二,叁。则其多个所占空间尺寸为一:二:三,如下图:

图片 1

flex

代码示例:

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

export default class FlexDemo extends Component {
    render() {
        return (
            <View style={ {flexDirection:'row',height:40, backgroundColor:"darkgray"}}>
                <View style={ {flex:1,backgroundColor:"red"}}>
                    <Text style={ {fontSize:16}}>flex:1</Text>
                </View>
                <View style={ {flex:2,backgroundColor:"blue"}}>
                    <Text style={ {fontSize:16}}>flex:2</Text>
                </View>
                <View style={ {flex:3,backgroundColor:"green"}}>
                    <Text style={ {fontSize:16}}>flex:3</Text>
                </View>
            </View>
        );
    }
}

图片 2

代码效果图

要是将八个子成分的flex都改为壹,则四个子成分所占空间大小也是一:1:一

三. ReactNative中Flexbox常用的几特天性

alignItems

alignItems定义子成分在次轴(与主轴垂直的轴)上的对齐方式。

alignItems: flex-start | flex-end | center | stretch;

  • flex-start:次轴的源点对齐。
  • flex-end:次轴的极端对齐。
  • center:次轴的中式点心对齐。
  • stretch(私下认可值):子成分在次轴方向充满整个容器的莫斯中国科学技术大学学或宽度。

小心:要使stretch选项生效的话,子成分在次轴方向上无法有稳定的尺寸

图片 3

alignItems

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

export default class AlignItemsDemo extends Component {
    render() {
        return (
            <View style={Styles.container}>
                <Text style={Styles.subtitle}>alignItems</Text>
                <View style={Styles.box}>
                    <Text style={Styles.item}>1</Text>
                    <Text style={Styles.item}>2</Text>
                    <Text style={Styles.item}>3</Text>
                    <Text style={Styles.item_flex_end}>4</Text>
                    <Text style={Styles.item}>5</Text>
                </View>
            </View>
        );
    }
}

const Styles = StyleSheet.create({
    container: {
        backgroundColor: "#0ff",
        height: 300,
    },
    subtitle:{
        backgroundColor: '#ffffff',
        alignItems: 'center'
    },
    box:{
        flex: 1,
        backgroundColor: '#333333',
        flexDirection:"row",
        alignItems:"flex-end", //通过设置flex-start | flex-end | center | stretch;各种值可以看看效果
    },
    item: {
        backgroundColor: "#f0f",
        flexGrow: 1,
        margin: 4,
        height: 100,
    },
    item_flex_end: {
        backgroundColor: "#f0f",
        flexGrow: 1,
        margin: 4,
        height: 100,
        alignSelf: "flex-end",
    }
})
  • flex:权重,类似Android中weight

纯属定位和争辩稳定。

  • absolute:相对定位,生成相对定位的成分,成分的职分通过 “left”,
    “top”, “right” 以及 “bottom” 属性进行鲜明。
  • relative:相对固定,生成相对稳定的要素,相对于其常规任务展开定位。

假定你后面是做Android开发的,那里会深感很不适应,这么些absolute和relative与Android中的AbsoluteLayout和RelativeLayout大差异,尤其是relative,能够说是完全两样。

网上有不胜枚举人总括说“react native
相对稳定不是相对于父容器,而是相对于兄弟节点”,小编以为说得很不标准。
二个元素假设不设定position去稳定的话,私下认可会形成文档流。种种成分会按梯次出今后文书档案流中,排到本人的岗位上。而只要该因素设置了针锋相对固定position:’relative’,则会相对于本人本来该在文书档案流的职位举办偏移,并且不影响其隔壁的成分的地点陈设。因而总计下来,react
native
相对稳定不是相对于父容器,也不是周旋于兄弟节点,而是相对于自个儿在文书档案流中不荒谬地方实行固定。

纯属定位absolute则是对峙于父容器举行绝对定位,脱离了文书档案流。

举个例证,有七个view,普通排列,由于rn是暗中同意flexbox布局,所以会是从上到下贰个凑近3个排列:

import React,{Component} from 'react';
import {
    Text,
    View,
    ScrollView,
    StyleSheet
} from 'react-native';

export default class PositionDemo extends Component {
    render() {
        return (
            <ScrollView>
                <View style={{flex:1}}>
                    <Text>FlexBox布局</Text>
                    <View style={styles.container}>
                        <View style={styles.box1}/>
                        <View style={[styles.box2]}/>
                        <View style={[styles.box3]}/>
                    </View>
                    <Text>第二个元素position=relative,top:20,left20</Text>
                    <View style={styles.container}>
                        <View style={styles.box1}/>
                        <View style={[styles.box2,{position:'relative',top:20,left:20}]}></View>
                        <View style={styles.box3}/>
                    </View>
                    <Text>第二个元素position=absolute,top:20,left20</Text>
                    <View style={styles.container}>
                        <View style={styles.box1}/>
                        <View style={[styles.box2,{position:'absolute',top:20,left:20}]}></View>
                        <View style={styles.box3}/>
                    </View>
                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 180,
        backgroundColor: '#CCCCCC',
        marginBottom: 10,
    },
    box1: {
        width: 50,
        height: 50,
        backgroundColor: '#FF0000'
    },
    box2: {
        width: 50,
        height: 50,
        backgroundColor: '#00FF00'
    },
    box3: {
        width: 50,
        height: 50,
        backgroundColor: '#0000FF'
    }
});

图片 4

图8. position

如上航海用体育场所所示,第三组中,笔者将第三因素设置为相对稳定positon:relative, top:20, left:20,能够看出第二个要素偏离原来的职位,但其依旧未有退出文档流,只是相对于它原本的岗位举办偏移。

在第二组中,我将第1个因素设置为相对定位positon:absolute, top:20, left:20,可以看来第二个要素脱离了文书档案流,绝对于父容器实行偏移,剩下第二个因素和第8个因素,还老老实实的排在那里。

惊奇的情人能够在率先组中为第二个要素设置一下top:20, left:20

 <View style={[styles.box2,{top:20,left:20}]}/>

看望会油然则生哪些的结果吗?

图片 5

如上海体育场所,它与第3组的场所同样,所以我们得以看到要素默许的position是relative。即大家假如不设值position的话,默许按相对稳定来处理。

  • justifyContent:设置子布局在主轴方向位置

其余质量

margin 外边距
marginBottom 底部外边距
marginLeft 左外边距
marginRight 右外边距
marginTop 上外边距
marginVertical 上下外边距,如果marginTop与marginBottom一样的话,可以直接用这个值代替
marginHorizontal 左右外边距
borderColor 整体边框颜色
borderRadius 整体边框的圆角
borderWidth 整体边框的宽
borderStyle 边框样式 dotted solid double dashed等
borderBottomColor 底边框颜色
borderBottomWidth 底边框宽度
borderLeftColor 左边框颜色
borderLeftWidth 左边框宽度
borderRightColor 右边框颜色
borderRightWidth 右边框宽度
borderTopColor 上边框颜色
borderTopWidth 上边框宽度
borderBottomLeftRadius 左下角圆角边框
borderBottomRightRadius 右下角圆角边框
borderTopLeftRadius 上边框左圆角
borderTopRightRadius 上边框右圆角
padding 内边距
paddingBottom 底部内边距
paddingTop 顶部内边距
paddingLeft 左内边距
paddingRight 右内边距
paddingHorizontal 左右内边距
paddingVertical 上下内边距
height 元素高度,包含padding与border
width 元素宽度,包含padding与border

relative.png

FlexBox

React
Native是利用FlexBox(弹性)布局,使用FlexBox规则来钦赐有个别组件的子成分的布局,FlexBox提供了在分歧尺寸设备上都能保持一致的布局方式,它是CSS3弹性框布局规范,因而熟习前端的同室恐怕对此深感很密切,但是React
Native的FlexBox与web上的CSS也存在个别差别。

率先是暗中认可值分化:flexDirection的暗许值是column而不是row(那一点与手机客户端支付一致),而flex也只能钦点三个数字值。

FlexBox类似android开发中的LinearLayout(线性布局),可是依然有无数分歧之处,千万不可能用LinearLayout的知识照猫画虎。

在学习FlexBox属性从前,让我们先驾驭多个定义:主轴和次轴

图片 6

主轴和次轴

  • 主轴即子成分线性排列的趋向,如图水平轴为主轴,即子成分按程度方向排列。
  • 次轴即与主轴垂直的轴,在图中为纵轴。

flexWrap.png

子视图属性

  • alignSelf
  • flex
  • alignItems:设置子布局在交叉轴方向地点

flexDirection

flexDirection钦点布局的主轴方向,定义了父视图中的子元素子成分是理所应当沿着水平轴(row)方向排列,照旧顺着竖直轴(column)方向排列。如若未钦点,私下认可值是竖直轴(column)方向。(那一点与css中不一样,但与android的LinearLayout是壹模一样的,私下认可竖直方向排列)

flexDirection: row | row-reverse | column | column-reverse;

  • row: 从左向右依次排列
  • row-reverse: 从右向左依次排列
  • column(default): 默认的排列格局,从上向下排列
  • column-reverse: 从下向上排列

图片 7

flexDirection

代码示例:

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

export default class FlexDirectionDemo extends Component {
    render() {
        return (
            <View style={Styles.container}>
                <Text style={Styles.subtitle}>flexDirectionDemo:row</Text>
                <View style={Styles.box1}>
                    <Text style={Styles.item}>1</Text>
                    <Text style={Styles.item}>2</Text>
                    <Text style={Styles.item}>3</Text>
                    <Text style={Styles.item}>4</Text>
                </View>
                <Text style={Styles.subtitle}>flexDirectionDemo:row-reverse</Text>
                <View style={Styles.box2}>
                    <Text style={Styles.item}>1</Text>
                    <Text style={Styles.item}>2</Text>
                    <Text style={Styles.item}>3</Text>
                    <Text style={Styles.item}>4</Text>
                </View>
                <Text style={Styles.subtitle}>flexDirectionDemo:column</Text>
                <View style={Styles.box3}>
                    <Text style={Styles.item}>1</Text>
                    <Text style={Styles.item}>2</Text>
                    <Text style={Styles.item}>3</Text>
                    <Text style={Styles.item}>4</Text>
                </View>
                <Text style={Styles.subtitle}>flexDirectionDemo:column-reverse</Text>
                <View style={Styles.box4}>
                    <Text style={Styles.item}>1</Text>
                    <Text style={Styles.item}>2</Text>
                    <Text style={Styles.item}>3</Text>
                    <Text style={Styles.item}>4</Text>
                </View>
            </View>
        );
    }
}
const Styles = StyleSheet.create({
    container: {
        backgroundColor: "#ffffff",
        flex: 1,
    },
    subtitle:{
        backgroundColor: '#ffffff',
        alignItems: 'center'
    },
    box1:{
        height: 60,
        backgroundColor: '#333333',
        flexDirection:"row",
    },
    box2:{
        height: 60,
        backgroundColor: '#333333',
        flexDirection:"row-reverse",
    },
    box3:{
        height: 180,
        backgroundColor: '#333333',
        flexDirection:"column",
    },
    box4:{
        height: 180,
        backgroundColor: '#333333',
        flexDirection:"column-reverse",
    },
    item: {
        backgroundColor: "#f0f",
        width:30,
        margin: 4,
        height: 30,
    },
})

图片 8

代码效果图

absolute.png

Demo

正文的演示代码在:
https://github.com/mronion0603/ReactNativeExercise/tree/master/src/02\_flex

flexDirection.png

flexWrap

flexWrap定义了子成分在父视图内是不是允许多行排列,暗中认可为nowrap(不换行)

flexWrap: nowrap | wrap ;

  • nowrap (暗许):不换行,只怕造成溢出。
  • wrap 换行,子成分在1行排列不下时,就进行多行排列。

图片 9

flexWrap

代码示例:

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

export default class FlexWrapDemo extends Component {
    render() {
        return (
            <View style={Styles.container}>
                <Text style={Styles.subtitle}>flexWrap:nowrap</Text>
                <View style={Styles.box1}>
                    <Text style={Styles.item}>1</Text>
                    <Text style={Styles.item}>2</Text>
                    <Text style={Styles.item}>3</Text>
                    <Text style={Styles.item}>4</Text>
                </View>
                <Text style={Styles.subtitle}>flexWrap:wrap</Text>
                <View style={Styles.box2}>
                    <Text style={Styles.item}>1</Text>
                    <Text style={Styles.item}>2</Text>
                    <Text style={Styles.item}>3</Text>
                    <Text style={Styles.item}>4</Text>
                </View>

            </View>
        );
    }
}
const Styles = StyleSheet.create({
    container: {
        backgroundColor: "#ffffff",
        flex: 1,
    },
    subtitle:{
        backgroundColor: '#ffffff',
        alignItems: 'center'
    },
    box1:{
        height: 150,
        backgroundColor: '#333333',
        flexDirection:"row",
        flexWrap:"nowrap",
    },
    box2:{
        height: 150,
        backgroundColor: '#333333',
        flexDirection:"row",
        flexWrap:"wrap",
    },

    item: {
        backgroundColor: "#f0f",
        width:100,
        margin: 4,
        height: 50,
    },
})

图片 10

代码效果图

2. ReactNative中的Flexbox
总所周知,移动端在采纳和操作习惯与PC端有着截然的例外,那就决定了它和WEB端在布局格局以及复杂度方面抱有光辉的差距。所以在ReactNative中,官方对Flexbox做了有的阉割,以用来适应移动端的布局方式。

定位position

position 属性设置成分的永恒情势,为就要定位的成分定义定位规则。

position : absolute | relative

1. 什么是Flexbox?
大约的话Flexbox是属于web前端领域CSS的1种布局方案,是二〇〇九年W3C提出了壹种新的布局方案,能够方便、完整、响应式地落到实处种种页面布局。你能够简简单单的知情为Flexbox是CSS领域接近Android中
LinearLayout的壹种布局,可是要比 LinearLayout要强硬的多。

父视图属性(容器属性)

  • flexDirection
  • flexWrap
  • justifyContent
  • alignItems

在我们介绍这几个属性在此之前,有一个定义,须求跟大家讲解下,这就是主轴交叉轴。上边的大部属性和这么些定义有一贯关乎,先导学习Flexbox或者相比较质疑,有十分的大可能率正是没精通通晓这一个概念。

alignSelf

alignSelf属性以属性定义了flex容器内被选中子成分的对齐情势。允许该子元根本与其它子成分不雷同的对齐格局,可覆盖alignItems
属性

alignSelf: auto | flex-start | flex-end | center | stretch;
暗中同意值为auto,表示继续父成分的alignItems属性,即便未有父成分,则同样stretch。

该属性也许取6个值,除了auto,别的都与alignItems属性完全一致。

以下图为例,该图中父元素的alignItems属性为flex-start,所以子成分遵照图alignItems中的flex-start所示,而第一个子成分设置了其alignSelf属性为flex-end,
因而第二个子成分的alignSelf属性覆盖父成分的alignItems属性别变化为与底部对齐。

图片 11

alignSelf

代码示例:

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

export default class AlignSelfDemo extends Component {
    render() {
        return (
            <View style={AlignSelfDemoStyle.container}>
                <Text style={AlignSelfDemoStyle.subtitle}>alignSelf</Text>
                <View style={AlignSelfDemoStyle.box}>
                    <Text style={AlignSelfDemoStyle.item}>1</Text>
                    <Text style={AlignSelfDemoStyle.item}>2</Text>
                    <Text style={AlignSelfDemoStyle.item}>3</Text>
                    <Text style={AlignSelfDemoStyle.item_flex_end}>4</Text>
                    <Text style={AlignSelfDemoStyle.item}>5</Text>
                </View>
            </View>
        );
    }
}

const AlignSelfDemoStyle = StyleSheet.create({
    container: {
        backgroundColor: "#0ff",
        height: 300,
    },
    subtitle:{
        backgroundColor: '#ffffff',
        alignItems: 'center'
    },
    box:{
        flex: 1,
        backgroundColor: '#333333',
        flexDirection:"row",
    },
    item: {
        backgroundColor: "#f0f",
        flexGrow: 1,
        margin: 4,
        height: 100,
    },
    item_flex_end: {
        backgroundColor: "#f0f",
        flexGrow: 1,
        margin: 4,
        height: 100,
        alignSelf: "flex-end",
    }
})

图片 12

代码效果图

alignSelf.png

justifyContent

justifyContent定义了子成分在主轴上的对齐格局。

justifyContent: flex-start | flex-end | center | space-between |
space-
around;

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,子成分之间的间隔都等于。
  • space-around:每一种子成分两侧的距离相等。所以,子元素之间的间隔比子成分与边框的间隔大学一年级倍。

图片 13

justifyContent

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

export default class JustifyContentDemo extends Component {
    render() {
        return (
            <View style={Styles.container}>
                <Text style={Styles.subtitle}>JustifyContent:flex-start</Text>
                <View style={Styles.box1}>
                    <Text style={Styles.item}>1</Text>
                    <Text style={Styles.item}>2</Text>
                    <Text style={Styles.item}>3</Text>
                </View>
                <Text style={Styles.subtitle}>JustifyContent:flex-end</Text>
                <View style={Styles.box2}>
                    <Text style={Styles.item}>1</Text>
                    <Text style={Styles.item}>2</Text>
                    <Text style={Styles.item}>3</Text>
                </View>
                <Text style={Styles.subtitle}>JustifyContent:center</Text>
                <View style={Styles.box3}>
                    <Text style={Styles.item}>1</Text>
                    <Text style={Styles.item}>2</Text>
                    <Text style={Styles.item}>3</Text>
                </View>
                <Text style={Styles.subtitle}>JustifyContent:space-between</Text>
                <View style={Styles.box4}>
                    <Text style={Styles.item}>1</Text>
                    <Text style={Styles.item}>2</Text>
                    <Text style={Styles.item}>3</Text>
                </View>
                <Text style={Styles.subtitle}>JustifyContent:space-around</Text>
                <View style={Styles.box5}>
                    <Text style={Styles.item}>1</Text>
                    <Text style={Styles.item}>2</Text>
                    <Text style={Styles.item}>3</Text>
                </View>
            </View>
        );
    }
}
const Styles = StyleSheet.create({
    container: {
        backgroundColor: "#0ff",
        flex: 1,
    },
    subtitle:{
        backgroundColor: '#ffffff',
        alignItems: 'center'
    },
    box1:{
        height: 100,
        backgroundColor: '#333333',
        flexDirection:"row",
        justifyContent:"flex-start",
    },
    box2:{
        height: 100,
        backgroundColor: '#333333',
        flexDirection:"row",
        justifyContent:"flex-end",
    },
    box3:{
        height: 100,
        backgroundColor: '#333333',
        flexDirection:"row",
        justifyContent:"center",
    },
    box4:{
        height: 100,
        backgroundColor: '#333333',
        flexDirection:"row",
        justifyContent:"space-between",
    },
    box5:{
        height: 100,
        backgroundColor: '#333333',
        flexDirection:"row",
        justifyContent:"space-around",
    },
    item: {
        backgroundColor: "#f0f",
        width:50,
        margin: 4,
        height: 50,
    },
})

图片 14

代码效果图

flex.png

  • position:定位方式,分为absolute和relative三种
    absolute:相对定位,相对于原点(左上角)

    <Text style={{
      fontSize: 20,
      textAlign: 'center',
      backgroundColor: '#0000FF',
      color: '#FFFFFF',
      position: 'absolute',
      left: 100,
      top: 100
      }}>
      B
    </Text>
    
  • alignSelf:设置子布局在交叉轴方向地方
  • 容器属性
    flexDirection、justifyContent、alignItems、flexWrap
  • 要素属性
    alignSelf、flex、position

有关全部的Flexbox布局教程,能够参考阮1峰的Flex
布局教程:语法篇

  <Text style={{
    fontSize: 20,
    textAlign: 'center',
    backgroundColor: '#0000FF',
    color: '#FFFFFF',
    position: 'relative',
    left: 100,
    top: 100
    }}>
    B
  </Text>
  • flexWrap:水平或垂直布局时:如果实View放不下,则自动换行,
    私下认可为’nowrap'(不换行)

relative:绝对稳定,相对于如今任务

主轴交叉轴是由flexDirection其1个性来决定的,让我们第三来看下flexDirection

  • flexDirection:那么些天性决定了子View排列的来头,类似Android中LinearLayout的orientation属性,它有四个值:
    row:横向排列,主轴为水平方向,交叉轴为垂直方向;
    column:竖直排列,主轴为垂直方向,交叉轴为水平方向。
    内部,私下认可值是column

justifyContent.png

alignItems.png