FlexBox布局

概述

FlexBox（弹性框布局）：英文全称the flexible box Module，FlexBox旨在提供了在不同尺寸设备上都能保持一致的布局方式。 其主要思想是：让容器有能力让其子项目能够改变其宽度|高度|顺序，以最佳方式填充可用空间。在布局中，首先得确定主轴方向(flexDirection)，主轴组件的对齐方式（justifyContent），侧轴组件的对齐方式(alignItems)，通过以上四点可以基本确定布局。 注：FlexBox是CSS3弹性框布局规范，目前还处于最终征求意见稿 (Last Call Working Draft)阶段，并不是所有的浏览器都支持Flexbox。

在学习FlexBox之前首先要清楚一个概念“宽和高”。一个组件的高度和宽度决定了它在屏幕上的尺寸，显示的效果。

FlexBox属性

为了更好的理解与应用FlexBox，我们先看一下FlexBox所具有的属性。

主轴和侧轴(横轴和竖轴)

在学习属性之前，让我们先了解一个概念：主轴和侧轴。

这里写图片描述

如图：主轴即水平方向的轴线，可以理解成横轴，侧轴垂直于主轴，可以理解为竖轴。

flexDirection 该属性确定了主轴方向。

justifyContent 该属性确定了组件在主轴方向上的对齐方式。

alignItems 该属性确定了组件在侧轴方向上的对齐方式。

flexWrap 该属性主要用作换行，默认情况下，项目都排列在一条线上，放不下的部分则不放置，flexWap就是定义是否换行的。。

代码示例

<View style={ {flexDirection:'row-reverse',backgroundColor:"darkgray",marginTop:20}}>
    <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>1</Text>
  </View>
  <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>2</Text>
  </View>
  <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>3</Text>
  </View>
  <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>4</Text>
  </View>
  </View>

这里写图片描述

宽和高

在React Native中尺寸是没有单位的，它代表了设备独立像素。有点类似于Android的设备像素。 如：

<View style={ {width:100,height:100,margin:40,backgroundColor:'gray'}}>
        <Text style={ {fontSize:16,margin:20}}>尺寸</Text>
</View>

上诉代码：运行在Android上时，View的长和宽被解释成：100dp 100dp单位是dp，字体被解释成16sp 单位是sp，运行在iOS上时尺寸单位被解释称了pt，这些单位确保了布局在任何不同dpi的手机屏幕上显示不会发生改变。

RN的FlexBox和css的FlexBox的异同

虽然React Native中的FlexBox 和Web CSSS上FlexBox工作方式是一样的。但是在某些方面还是有细微区别的：

• flexDirection: React Native中默认为flexDirection:’column’，在Web CSS中默认为flex-direction:’row’
• alignItems: React Native中默认为alignItems:’stretch’，在Web CSS中默认align-items:’flex-start’
• flex: React Native中flex只接受一个参数，而Web Css的flex可以接受多参数，如:flex: 2 2 10%
• RN不支持属性：align-content，flex-basis，order，flex-basis，flex-flow，flex-grow，flex-shrink

React Native

React Native布局属性

以下属性是React Native所支持的Flex属性。

父视图属性(容器属性)：

• flexDirection enum(‘row’, ‘column’,’row-reverse’,’column-reverse’)
• flexWrap enum(‘wrap’, ‘nowrap’)
• justifyContent enum(‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)
• alignItems enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)

justifyContent

该属性定义了浏览器如何分配顺着父容器主轴的弹性（flex）元素之间及其周围的空间，默认为flex-start。

代码示例：

<View 		 style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>

这里写图片描述

alignItems

属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch。 属性请参照本文开头的讲解。 代码示例：

<View 		 style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>

这里写图片描述

子视图属性

alignSelf

该属性以属性定义了flex容器内被选中项目的对齐方式。注意：alignSelf 属性可重写灵活容器的 alignItems 属性。

代码示例：

<View style={ {alignSelf:'baseline',width:60,height:	20,backgroundColor:"darkcyan",margin:5}}>
   <Text style={ {fontSize:16}}>1</Text>
</View>

这里写图片描述

flex

该属性定义了一个可伸缩元素的能力，默认为0。类似于比重这么一个概念（因其位于父视图下面，所以比重相当于所占的百分比）。

代码示例：

<View style={ {flexDirection:'row',height:40, backgroundColor:"darkgray",marginTop:20}}>
  <View style={ {flex:1,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>flex:1</Text>
  </View>
  <View style={ {flex:2,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>flex:2</Text>
  </View>
  <View style={ {flex:3,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>flex:3</Text>
  </View>          
</View>

这里写图片描述

其他属性

视图边框

外边框

内边框

边缘

元素定位