React Native flexBox布局（一）

**

**

3.3 justifyContent属性

justifyContent属性定义了项目在主轴上的对齐方式。(自己试验是在横轴上)

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

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

• flex-start（默认值）：左对齐

• flex-end：右对齐

• center： 居中

• space-between：两端对齐，项目之间的间隔都相等。

• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3.4 alignItems属性

alignItems属性定义项目在交叉轴上如何对齐。

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

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

• flex-start：交叉轴的起点对齐。

• flex-end：交叉轴的终点对齐。

• center：交叉轴的中点对齐。

• baseline: 项目的第一行文字的基线对齐。

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

• 4、元素的属性

• alignSelf

• flexGrow

• flexShrink

• flexBasis

• flex

4.1 alignSelf属性

alignSelf属性允许单个项目有与其他项目不一样的对齐方式，可覆盖alignItems属性。默认值为auto，表示继承父元素的alignItems属性，如果没有父元素，则等同于stretch。

alignSelf: auto | flex-start | flex-end | center | baseline | stretch;

应用demo：

import React, { Component } from ‘react’;

import {

AppRegistry,

Image,

ListView,

StyleSheet,

Text,

View,

} from ‘react-native’;

class RNHybrid extends Component {

render() {

return(

<View style={{flexDirection:‘row’,justifyContent:‘space-around’,alignItems:‘flex-start’}}>

<View style={{backgroundColor:‘red’,width:30,height:30,marginTop:100,alignSelf:‘flex-end’}}>

<View style={{backgroundColor:‘yellow’,width:30,height:40,marginTop:100}}>

<View style={{backgroundColor:‘blue’,width:30,height:50,marginTop:100}}>

);

}

}

AppRegistry.registerComponent(‘RNHybrid’, () => RNHybrid);

效果：

其他效果可以修改属性尝试。

4.2 flexGrow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

代码：

render() {

return(

<View style={{flexDirection:‘row’,justifyContent:‘space-around’,alignItems:‘flex-start’}}>

<View style={{backgroundColor:‘red’,width:30,height:30,marginTop:100,flexGrow:1}}>

<View style={{backgroundColor:‘yellow’,width:30,height:40,marginTop:100,flexGrow:2}}>

<View style={{backgroundColor:‘blue’,width:30,height:50,marginTop:100,flexGrow:1}}>

);

}

效果：

总结：我们可以看出，这个属性不受原来宽度的限制，从新按比例分配。

注意：如果第一个红色View控件该属性为0或者没有该属性，其他两个View拥有该属性，那么这个View会把这行红色View所占空间剩下的空间按比例分配。如Demo2

Demo2:

代码：

return(

<View style={{flexDirection:‘row’,justifyContent:‘space-around’,alignItems:‘flex-start’}}>

<View style={{backgroundColor:‘red’,width:250,height:30,marginTop:100}}>

<View style={{backgroundColor:‘yellow’,width:30,height:40,marginTop:100,flexGrow:2}}>

<View style={{backgroundColor:‘blue’,width:30,height:50,marginTop:100,flexGrow:1}}>

);

效果：

4.3 flexShrink属性

flexShrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

代码：

return(

<View style={{flexDirection:‘row’,justifyContent:‘space-around’,alignItems:‘flex-start’}}>

<View style={{backgroundColor:‘red’,width:100,height:30,marginTop:100,flexShrink:0}}>

<View style={{backgroundColor:‘yellow’,width:200,height:40,marginTop:100,flexShrink:1}}>

<View style={{backgroundColor:‘blue’,width:200,height:50,marginTop:100,flexShrink:0}}>

);

效果：

总结:不难看出，flexShrink属性值是1的时候代码，空间不足的时候缩放，flexShrink 0的时候不缩放。

4.4 flexBasis属性

flexBasis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

代码:

render() {

return(

<View style={{flexDirection:‘row’,alignItems:‘flex-end’}}>

<View style={{backgroundColor:‘red’,width:200,height:30,marginTop:100,flexShrink:1}}>

<View style={{backgroundColor:‘yellow’,width:200,height:40,marginTop:100,flexBasis:350}}>

<View style={{backgroundColor:‘blue’,width:200,height:50,marginTop:100,flexShrink:1}}>

);

}

效果:

4.5 flex属性

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

mg-blog.csdn.net/20170803144845993?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvWllfRmx5V2F5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

4.5 flex属性

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

[外链图片转存中…(img-cWDKsr3R-1720099586419)]

[外链图片转存中…(img-6dR6wtUt-1720099586420)]