React Native的FlexBox布局
flexbox：弹性的相对布局
三个关键字 flexDirection，justifyContent，alignItems
React Native中的布局
容器属性
- flexDirection：主轴方向，默认是
column
flexDirection:'column'(纵向排列，默认) | flexDirection:'row'(横向排列)`
flexDirection
flexDirection
-
justifyContent：主轴对齐方式
flex-start | center | flex-end | space-around | space-between
justifyContent
-
alignItems：侧轴对齐方式
flex-start | center | flex-end | stretch
alignItems
All.png
-
flexWrap：换行还是不换行，默认是nowrap(一行)
1240.png
元素属性
-
flex
flex -
alignSelf
1240.png
flexbox布局总结：
- 宽高指定的情况下 stretch 无效
- 基于flex的布局，view默认宽度为100%
- 水平居中用alignItems, 垂直居中用justifyContent
- 基于flex能够实现现有的网格系统需求，且网格能够各种嵌套无bug
布局概念知识补
- 设置宽度或者高度时不用带单位,默认使用pt为单位
- 不能设置百分比来设置宽度或高度
- 可通过Dimensions模块来获取窗口高度
- 可通过PixelRatio模块来获取像素密度
1240.png
盒子模型图
1240-1.png
定位模式
- 支持
absolute和relative定位 - 和css的标准不同的是,元素容器不用设置
position: 'absolute|relative'
1240-1.png
1240.png
参考资料
React布局
1 容器的6个属性：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
- 1.1
flex-direction决定主轴方向（即item的排列方向）React Native 中默认为flexDirection:'column'
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿
flex-direction
- 1.2
flex-wrap默认情况下，item都排在一条线（又称"轴线"）上。如果一条轴线排不下，如何换行。
flex-wrap
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
- 1.3
flex-flow是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
- 1.4
justify-content属性是item在主轴上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目中间间隔相等。
space-around：均匀分布，每个项目两侧的间隔都相等。所以，项目中间的间隔比项目与边框的间隔大一倍。
justify-content
- 1.5
align-items是item在侧轴上如何对齐React Native中默认为alignItems:'stretch'
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：起点对齐
flex-end：终点对齐
center：中点对齐
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-items
- 1.6
align-content定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-direction
flex-wrap
justify-content
align-items
