ReactNative--FlexboxFlexbox是前端CSS3弹性框布局规范，提供了在不同尺寸设备上都能保持一致的

Flexbox在reactnative和web中的区别

Flexbox是前端CSS3弹性框布局规范，提供了在不同尺寸设备上都能保持一致的布局方式。RN的Flexbox源自web的Flexbox，并基于移动端特性和限制，做了一些优化和限制

部分默认值不一样：

flexDirection: React Native中默认为flexDirection:'column'，在Web CSS中默认为flex-direction:'row'
alignItems: React Native中默认为alignItems:'stretch'，在Web CSS中默认align-items:'flex-start'

部分web的Flexbox属性RN不支持

由于大家对web的Flexbox并不是那么熟悉，所以我仅列出了RN支持的Flexbox属性，以供大家参考

export interface FlexStyle {
// flex属性
	flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
    flexWrap?: "wrap" | "nowrap";
    alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around";
    
    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";

    flex?: number;
    flexBasis?: number | string;
    flexGrow?: number;
    flexShrink?: number;
// 其他布局
    borderBottomWidth?: number;
    borderEndWidth?: number | string;
    borderLeftWidth?: number;
    borderRightWidth?: number;
    borderStartWidth?: number | string;
    borderTopWidth?: number;
    borderWidth?: number;
    
    margin?: number | string;
    marginBottom?: number | string;
    marginEnd?: number | string;
    marginHorizontal?: number | string;
    marginLeft?: number | string;
    marginRight?: number | string;
    marginStart?: number | string;
    marginTop?: number | string;
    marginVertical?: number | string;
    
    padding?: number | string;
    paddingBottom?: number | string;
    paddingEnd?: number | string;
    paddingHorizontal?: number | string;
    paddingLeft?: number | string;
    paddingRight?: number | string;
    paddingStart?: number | string;
    paddingTop?: number | string;
    paddingVertical?: number | string;
    
    maxHeight?: number | string;
    maxWidth?: number | string;
    minHeight?: number | string;
    minWidth?: number | string;
    
		width?: number | string;
    height?: number | string;

    position?: "absolute" | "relative";
    left?: number | string;
    right?: number | string;
    bottom?: number | string;
    top?: number | string;
    

    
// 低优先级
    start?: number | string;
    end?: number | string;
    
    aspectRatio?: number;

    overflow?: "visible" | "hidden" | "scroll";
		display?: "none" | "flex";
    zIndex?: number;
}

像素单位

在RN中尺寸是没有单位的，它代表了设备独立像素。
Android上,长宽单位是dp，字体是sp；ios上，长宽单位是pt
这些单位确保了布局在任何不同dpi的手机屏幕上显示不变

const styles = StyleSheet.create({
  root: {
    width: 100,
    height: 100,
    fontSize: 16
  }
})

布局属性

父视图属性

flexDirection：主轴方向

flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";默认是column

row: 从左向右依次排列
row-reverse: 从右向左依次排列
column(default): 默认的排列方式，从上向下排列
column-reverse: 从下向上排列

justifyContent：主轴上的对齐方式和额外空间的分配方式

justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";默认为flex-start

flex-start(default): 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
flex-end: 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。
center：伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
space-between：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
space-around：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半
space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等

alignItems：交叉轴的对齐方式

alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";默认为"stretch"。

stretch(default)：交叉轴方向拉伸显示；只有交叉轴不设置长度或者为auto时，此属性生效
flex-start：项目按交叉轴起点线对齐
flex-end：项目按交叉轴终点线对齐
center：交叉轴方向项目中间对齐
baseline：交叉轴方向按第一行文字基线对齐

flexWrap：子元素是否可以多行排列

flexWrap?: "wrap" | "nowrap";默认为nowrap

nowrap：flex的元素只排列在一行上，可能导致溢出。
wrap：flex的元素在一行排列不下时，就进行多行排列。

alignContent：当flexWrap: 'wrap'，并且子视图总长度超出父视图时，交叉轴的对齐方式

alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around";默认为"flex-start"

stretch：拉伸显示
flex-start(default)：从启点线开始顺序排列
flex-end：相对终点线顺序排列
center：居中排列
space-between：项目均匀分布，第一项在启点线，最后一项在终点线
space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距离是两个项目之间留白的和
单行时不生效

子视图属性

alignSelf：容器中某个项目的对齐方式

alignSelf 属性可重写灵活容器的 alignItems 属性。
alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline"; auto(default) 元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
stretch：交叉轴方向拉伸显示
flex-start：项目按交叉轴起点线对齐
flex-end：项目按交叉轴终点线对齐
center：交叉轴方向项目中间对齐
baseline：交叉轴方向按第一行文字基线对齐

伸缩属性

flex：定义了一个可伸缩元素的能力

0表示不伸缩; 非0表示伸缩; 默认为0

如果有多个子视图具备flex属性，他们的伸缩后长度，会按照flex值比例分配
即使每个视图设置了宽度，但是由于设置了flex值，最终宽度会按照flex值比例分配

flex为符合属性，包含 flexGrow | flexShrink | flexBasis，默认为0 | 1 | auto

flexGrow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flexShrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flexBasis：项目的初始宽度。它的默认值为auto，即项目的本来的宽度。同时设了width和flexBasis时，flexBasis会覆盖width的值。

其他布局

border | margin | padding

border表示边框

borderBottomWidth?: number;
borderEndWidth?: number | string;
borderLeftWidth?: number;
borderRightWidth?: number;
borderStartWidth?: number | string;
borderTopWidth?: number;
borderWidth?: number;

margin表示外边距

margin?: number | string;
marginBottom?: number | string;
marginEnd?: number | string;
marginHorizontal?: number | string;
marginLeft?: number | string;
marginRight?: number | string;
marginStart?: number | string;
marginTop?: number | string;
marginVertical?: number | string;

padding表示内边距

padding?: number | string;
paddingBottom?: number | string;
paddingEnd?: number | string;
paddingHorizontal?: number | string;
paddingLeft?: number | string;
paddingRight?: number | string;
paddingStart?: number | string;
paddingTop?: number | string;
paddingVertical?: number | string;

最大最小宽高

maxHeight?: number | string;
maxWidth?: number | string;
minHeight?: number | string;
minWidth?: number | string;

绝对布局

position：指定布局方式

position?: "absolute" | "relative";，默认是'relative'

relative：相对布局，对兄弟节点相对布局，如果有兄弟节点存在，会占有一定位置。
absolute：绝对布局，布局时不管兄弟节点，直接针对父节点布局。

设置位置

使用绝对布局时(position?: "absolute")，设置位置需要使用绝对位置

left?: number | string;
right?: number | string;
bottom?: number | string;
top?: number | string;