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";
}
网友评论