文章标题

FlexBox属性列表记录

用在父元素上面的属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction属性用来规定子元素在父元素主轴的排列方向

flex-direction: row/row-reverse/column/column-reverse
row(默认值): 主轴为水平方向，起点left
row-reverse: 主轴在垂直方向，起点在right
column：主轴在垂直方向，起点在top
column-reverse: 主轴在垂直方向，起点在bottom

flex-wrap属性用来定义子元素如果在主轴上面排列不下了应该如何换行

flex-wrap:　nowrap/wrap/wrap-reverse
nowrap(默认值): 不换行
wrap: 换行，首行在上
wrap-reverse: 换行，首行在下

flex-flow属性是前面两个数属性的简写，ex :

flex-flow: row nowrap

justify-content属性用来定义子元素在容器里面的对齐方式

justify: flex-start/flex-end/center/space-between/space-around
flex-start(默认值): 左对齐 
flex-end： 右对齐
center:　居中
space-between： 两端对齐，项目之间距离相等
space-around: 每个项目两侧的间隔相等

align-items属性用来定义子元素在交叉轴如何对其

align-items： flex-start/flex-end/center/baseline/stretch
flex-start: 交叉轴的起点对齐
flex-end： 交叉轴的重点对齐
center: 交叉轴的重点对齐
baseline： 基线对齐
stretch: 如果项目未设置高度或者设置为auto，将占满整个容器

align-content实行定义了多条轴线的对齐方式

align-content: flex-start/flex-end/center/space-between/space-around/stretch
flex-start: 与交叉轴的起点对齐
flex-end: 与交叉轴的终点对齐
center： 与交叉轴的中点对齐
space-between: 与交叉轴的两端对齐，轴线之间的间隔平均分布
space-around: 每根轴线两侧的间隔相等
stretch: 轴线铺满铺满整个交叉轴

用在子元素的属性：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order属性定义元素排列的顺序，之越小越靠前，默认值为0

order: <integer>

flex-grow属性定义元素的放大比例，默认值为0

flex-grow： <number>

flex-shrink属性定义项目的缩小比例，默认值为1

flex-shrink: <number>

flex-basis属性定义在分配多余空间之前，元素占据的主轴空间，默认值为auto

flex-basis: <length>/auto

flex属性为flex-grow&flex-shrink&flex-basis的简写，默认值为0 1 auto

flex: none(0 0 auto)/auto(1 1 auto)

align属性可以允许元素和其他的元素有不一样的对齐方式，可覆盖父容器的align-items属性,默认值为auto