FlexBox布局

父视图布局

标题一、flexDirection

1.flexDirection默认侧轴从上到下排列
row:主轴(行) column侧轴(列) reverse(反向)
2.flexDirection:’row’ 主轴
3.flexDirection:’row-reverse’主轴反向

二、flexWrap

flexWrap 属性定义了子元素在父视图内是否允许多行排列，默认为nowrap

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

三、JustifyContent

JustifyContent属性定义了浏览器如何分配顺着父容器主轴的弹性（Flex）元素之间及其周围的空间，默认为flex-start。对应的这些可选项有：flex-start、center、flex-end、space-around、space-between以及space-evenly。

flex-start(default)
从行首开始排列。每行第一个元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
flex-end
从行尾开始排列。每行最后一个弹性元素与行尾对齐，其它元素与后一个对齐。
center（水平居中）
伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
space-around
在每行上均匀分配弹性元。相邻元素间距相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是和相邻元素之间距离的一半
space-evenly
间距都相同
space-between
在每行上均匀分配弹性元素。相邻元素间距相同。每行第一个元素到行尾的距离相同

四、alignItems

alignItems属性以与justifyContent相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch。

flex-start   元素向轴起点对齐
flex-end     元素向轴终点对齐。
center (垂直居中)元素在侧轴居中。如果元素在侧轴上的高度高于其容器。那么两个方向上溢出距离相同
stretch      弹性元素被在侧轴方向被拉伸到与容器的高度或宽度

子视图布局

一、alignSelf

alignSelf属性以属性定义了flex容器内被选中项目的对齐方式。注意：alignSelf属性可以重写灵活容器alignItems属性

auto(defalut)元素继承了它的付容器的align-itemss属性。如果没有父容器则为stretch
stretch 元素被拉伸以适应容器
center 元素位于容器中心
flex-start 元素位于容器开头
flex-end 元素位于容器结尾

二、flex

"flex-grow"、"flex-shrink"、"flex-basis"三个属性的缩写，
其中第二个和第三个参数是可选参数
默认值为“0 1 auto”
宽度= 弹性宽度*（flexGrow/sum(flexGrow)）