react-native的位置与排列

type FlexAlignType = "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
export interface FlexStyle {
    //  作用类似于alignItems，运用于视图内包含多行容器的情况，用法类似justifyContent
    alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around";
    // 定义了子视图的对齐方式（顶部对齐、底部对齐、中间对齐、拉伸对齐）
    alignItems?: FlexAlignType;
    /**
      判断子视图是否忽略父视图的alignItems，默认为‘auto’，表示遵守父视图的对齐方式，
    当值为其他的时候，就忽略父视图的排列，遵循自身的值
    */
    alignSelf?: "auto" | FlexAlignType;
    // css3对其的解释为：定义输出设备中的页面可见区域宽度与高度的比率
    aspectRatio?: number;

    // 边框的宽度
    borderBottomWidth?: number;
    borderLeftWidth?: number;
    borderRightWidth?: number;
    borderTopWidth?: number;
    borderWidth?: number;
   
    // flexBasis、flexGrow、flexShrink的效果的叠加
    flex?: number;
    flexBasis?: number | string;
    // 空间足够时产生效果：放大比例
    flexGrow?: number;
    // 空间足够时产生效果：缩放比例
    flexShrink?: number;
    // 内部子视图的排列方式 从左到右|从上到下|从右到左|从下到上
    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
    // 是否自动换行 换行|不换
    flexWrap?: "wrap" | "nowrap";
    
    // 定义水平方向上如何排列子视图
    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";

    // 间隙宽度：定义容器与容器间的宽度
    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;

    // 位置相关 绝对位置|相对位置
    position?: "absolute" | "relative";
    left?: number | string;
    right?: number | string;
    top?: number | string;
    bottom?: number | string;
    width?: number | string;
    height?: number | string;
    maxHeight?: number | string;
    maxWidth?: number | string;
    minHeight?: number | string;
    minWidth?: number | string;
    // 当两个视图重叠时，zIndex值大的视图处于上层显示位置
    zIndex?: number;

    /**
     * @platform ios
     */
    direction?: "inherit" | "ltr" | "rtl";
}