今天我们就来说说Flexbox，它是一种前端布局方式。它是ReactNative中的主流布局方式。如果你刚刚开始接触ReactNative，或者你没有太多的前端技术经验，或者你对它了解不多，那么这篇文章将帮助你了解Flexbox的全貌。目的通过这篇文章，你会很快的了解整个Flexbox，因为你只需要掌握Flexbox的以下几个属性。flexflexDirectionjustifyContentalignItemsflexWrapalignSelflexFlexbox使用弹性布局，它有一个属性flex来控制它的弹性。有点类似于Android布局中的weight属性。当然，它也不同于前端css中的flex。它支持的类型是数字而不是字符串。它具有三种状态：正、零和负。直接看代码：importReact,{Component}from'react';从'react-native'导入{StyleSheet,Text,View}；exportdefaultclassAppextendsComponent{render(){return();}}conststyles=StyleSheet.create({容器：{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#F5FCFF',},red:{flex:1,width:100,backgroundColor:'red'},blue:{flex:2,width:100,backgroundColor:'blue'},orange:{width:100,height:100,backgroundColor:'orange'}});父容器使用flex:1填满整个屏幕，橙色为固定视图，而红色和蓝色使用flex，剩余空间由flex的值平分（1:2）。让我们看看它是如何工作的。这是正数的情况。如果flex:0，则控件的大小会固定，按照设置的宽高显示。如果是flex:-1，如果有足够的空间，控件的大小会根据宽高来显示；如果空间不足，则根据minWidth和minHeight显示。一般不使用flex:-1，经测试，minWidth和minHeight在空间不足时不会生效。如果您找到生效的方法，请告诉我。flexDirection在Flexbox中有一个主轴和一个副轴。主轴控制child的排列方向，默认为column。可以通过flexDirection属性更改主轴的方向。它有四个可选值：row：child水平排列column：child垂直排列（默认）row-reverse：child水平反向排列column-reverse：child垂直反向排列上面的demo改变样式基于：常量样式=StyleSheet.create({container:{flex:1,flexDirection:'row',justifyContent:'center',alignItems:'center',backgroundColor:'#F5FCFF',},red:{height:100,width:100,backgroundColor:'red'},blue:{width:100,height:100,backgroundColor:'blue'},orange:{width:100,height:100,backgroundColor:'orange'}});分别改变容器中flexDirection的值：row,row-reverse,column,column-reversejustifyContent固定好主轴后，可以使用justifyContent指定主轴方向child的排列方式，有六个可选值flex-start:child对齐到主轴的起点（默认）flex-end:child对齐到主轴的终点center:child居中对齐到主轴space-between:child对齐与相邻的孩子在主轴方向上，第一个和最后一个孩子与父容器对齐parentcontainerisequalandhalfdistancebetweenadjacentchildrenspace-evenly：子容器在主轴方向均匀分布。相邻间距等于首尾间距-start,flex-end,center,space-between,space-around和space-evenlyalignItems固定好主轴后，剩下的就是辅助轴了。alignItems可以用来控制辅助轴上的子排列。它有五个选项：flex-start:childalignstothesecondaryaxis(default)flex-end:childalignstotheendofthesecondaryaxiscenter:childalignstothecenterofthesecondaryaxisstretch:当child为弹性布局（副轴方向未设置size或auto），stretchandalignsecondaryaxisbaseline：当有文字时，child根据secondary中第一个文字基线对齐改变容器的样式axis方向，设置主轴为row，依次改变alignItems:flex-start,flex-end,centercontainer:{flex:1,flexDirection:'row',alignItems:'flex-start',backgroundColor:'#F5FCFF',}最后设置alignItems为拉伸，并改变红色的高度，红色会被拉伸container:{flex:1,flexDirection:'row',alignItems:'stretch',backgroundColor:'#F5FCFF',},red:{width:100,height:'auto',backgroundColor:'red'}alignItems:baseline,不是文字的中心，而是bot文本视图容器的tom。在上面的基础上添加一个Text，让文字本身显示在中间。容器：{flex:1,flexDirection:'row',alignItems:'baseline',backgroundColor:'#F5FCFF',},text:{width:80,height:80,fontSize:20,color:'white',marginTop:110,backgroundColor:'black',textAlign:'center',textAlignVertical:'center'}flexWrap如果再添加一个View，会因为空间不足而显示不全。这时候可以使用flexWrap属性，它可以支持自动换行。nowrap:nolinebreak(default)wrap:automaticlinewrap给容器添加flexWrap属性，并添加一个绿色视图容器:{flex:1,flexDirection:'row',flexWrap:'wrap',justifyContent:'flex-start',backgroundColor:'#F5FCFF',},green:{width:100,height:100,backgroundColor:'green'}alignSelfalignSelf属性和alignItems类似，它也是控制副轴上的对齐规则，不同的是它使用的对象是孩子自己。可以改变父容器的alignItems属性控制的子排列规则，在副轴上实现自己的排列规则。默认值为auto，继承父容器的alignItems属性。所以它也有五个可选值：flex-start、flex-end、center、stretch和baseline。例如，如果我们将alignSelf添加到range中，其他子元素不会发生变化，它们将继承父容器的alignItems：flex-startorange:{width:100,height:100,backgroundColor:'orange',alignSelf:'flex-end'}其他的可选值就不一一解释了。可以参考alignItemsother，最后还有三个比较冷门的属性。这里就不一一赘述了。alignSelf具有相同的范围。flexBasis：设置主轴方向的初始值，默认为auto。如果它与width或height同时存在，它们的值将被覆盖。flexGrow：设置chid的放大比例，类似flex，当有足够的空间时，会自动按比例放大。默认为0flexShrink：设置chid的缩小比例。当空间不足时，会自动缩小，默认为0。关于Flexbox，只要掌握开头列出的六个属性，ReactNative中的大部分布局都不成问题。现在对Flexbox更清楚了吗？自己去试试吧~精选文章ViewDragHelper：手势操作神器Android架构组件Part1：RoomCustomAndroidAnnotationPart1：Annotationvariabletensorflow-gradientdescent，这篇就够了，感觉不错，可以来一波关注，扫一扫下方二维码，关注公众号，及时获取最新知识技能。
