flexbox中的属性
1、display:flex | inline-flex
块级伸缩容器 | 行级伸缩容器
2、flex-direction: row | row-reverse | column | column-reverse
主轴方向
3、flex-wrap: nowrap | wrap | wrap-reverse
主轴方向空间不足时是否换行及如何换行
4、flex-flow: row nowrap | ...
flex-direction + flex-wrap
5、justify-content: flex-start | flex-end | center | space-around | space-between
伸缩项目在主轴线的对齐方式
6、align-items: flex-start | flex-end | center | baseline | stretch
伸缩项目在交叉轴上的对齐方式
7、align-content: stretch | flex-start | flex-end | center | space-around | space-between
伸缩项目出现换行后在交叉轴上的对齐方式
1、order: 0 | 整数值
物体的排列顺序，数值越小，排列越靠前
2、flex-grow: 0 | 整数值
弹性物体的放大比例，即表示如果存在剩余空间也不放大，剩余空间按各值分配比例
3、flex-shrink: 1 | 整数值
弹性物体的收缩比例
4、flex-basis: auto | length
弹性物体的基准值，剩余空间按比例进行伸缩
5、flex: 0 1 auto | flex-grow flex-shrink flex-basis
flex-grow，flex-shrink，flex-basis三个属性缩写
6、align-self: auto | flex-start | flex-end | center | baseline | stretch(弹性物品在交叉轴方向占满弹性容器，如果交叉轴为垂直方向的话，只有在不设置高度的情况下才能看到效果)
单独弹性物体在交叉轴上的对齐方式，会覆盖默认的对齐方式
1、alignItems: flex-start | flex-end | center | stretch
2、flexDirection: column | column-reverse | row-reverse | row
3、flexWrap: nowrap | wrap | wrap-reverse
4、justifyContent: flex-start | flex-end | center | space-around | space-between
5、alignSelf: auto | flex-start | flex-end | center | stretch
6、flex: 0 1 auto | flex-grow flex-shrink flex-basis
