ReactNative Flex![]()

RN中有4个容器属性，2个项目属性，容器属性即控制容器内的子元素设置在父元素上的，而项目属性即和自身有关

容器属性

flexDirection 决定主轴的方向
属性有 row row-reverse column(默认) column-reverse

flexWrap 当一条轴线排不下时 决定是否换行
属性有 nowrap(默认) 不换行 wrap 换行，第一行在上方 wrap-reverse换行，第一行在下方

justifyContent 定义伸缩项目在主轴的对齐方式
属性有flex-start(默认值) 伸缩项目向一行的起始位置靠齐 flex-end向一行的结束位置靠齐 center向一行的中间位置靠齐 space-between:两端对齐，项目之间的间隔相等 space-around:伸缩项目平均的分布在行中，两端保留一半的空间

alignItems 项目在交叉轴上如何对齐
属性有 flex-start：交叉轴的起点对齐 flex-end：交叉轴的终点对齐 cener：交叉轴的中点对齐 baseline：项目第一行文字的基线对齐 stretch（默认值）：若项目未设置高度或者auto将会占满整个容器高度

项目属性

flex 在RN中只能为整数 当取正整数时，将根据其他组建的flex值的比进行布局，当flex为0时，元素将不能缩放，宽高由具体值决定 当flex为-1时，元素将不能缩放，宽高由具体值决定，当剩余空间不够时，使用最小宽度和高度

alignSelf 决定了元素在父元素的磁州排列方式 允许单个项目和其他项目不一样的对齐方式，覆盖alignItems对齐方式，默认是auto属性

borderWidth 决定元素的边框宽度

borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth 决定元素和父元素的边界距离

bottom决定元素距离父元素的底部多少距离
left本组件到左边多少像素
right元素距离右边多少距离
top 元素距离顶部多少距离（顶部的定义取决于position）

height
width

margin 与设置了marginTop、marginBottom、marginLeft、marginRight效果相同
marginHorizontal相当于设置了marginLeft和marginRight 、 marginVertical相当于设置了marginTop和marginBottom

maxHeight设置该组件的最大高度限制
minHeight设置该组件最小高度

maxWidth 设置该组件最大宽度限制
minWidth 设置该组件最小宽度限制

overflow当内容超出范围时 hidden超出范围内容不显示 visible超出范围的也显示 scroll超出范围的可以滚动显示

padding相当于paddingToppaddingBottompaddingLeftpaddingRight设置元素和内容的内边距
paddingVertical paddingHorizontal

position 默认为relative 当设置为position时 即为相对于父元素布局

zIndex 控制元素重叠时 那个元素在上层显示，通常不设置的话 后添加的元素会默认覆盖之前的元素