display：
flex， inline-flex
flex-direction ：项目的排列方向
row, row-reverse, column, column-reverse
flex-wrap：
nowarp 默认值不换行，（默认Flex 容器的项目会同行显示，使用 flex-wrap 这个属性，我们可以控制项目是否要在多行显示 ）；
wrap：根据容器宽度会多行显示
wrap-reverse：上下颠倒容器item位置
flex-flow：它的值有两个部分，第一部分就是 flex-direction .. 第二部分是 flex-wrap， 默认这个属性的值是 row nowrap
设置成flex-flow: row-reverse wrap，表示 flex 项目会从右向左排列，并且会在多行显示。
justify-content: 可以调整项目的位置，还有项目与项目之间的间隔, 默认值是 flex-start
flex-start，flex-end，center
space-between（项目与项目中间添加一个间隔 .. 这里第一个项目的左边，还有最后一个项目的右边，跟容器之间不会有间隔）
space-around（在项目的左右两边去添加点间隔）
align-items：设置项目在容器里的垂直方向的对齐方式，默认是 stretch 拉伸
stretch 拉伸，会把项目的高度拉伸，让它跟容器的高度一样 ..
flex-start 会靠着容器的最上面显示
flex-end 项目会出现在容器的底部
center: 水平居中
baseline 基线对齐，靠着 cross 轴的上边显示
align-content：调整这些项目在容器里的垂直方向的对齐方式
stretch 默认，这样不同行的项目会被拉伸，占满容器的高度
flex-start ，现在它们会靠着 cross 轴的起点显示，也就是容器的顶部开始显示，并这些项目高度不会被拉伸
flex-end：在容器的底部显示
center：居中
space-around：在不拉伸项目高度的情况下，我们可以利用容器里这些剩下的垂直方向的空间 ，它会在项目的行与行的中间添加间隔
order：数值，默认这些项目的顺序就是添加它们的 html 代码的顺序，所有项目默认 order 属性的值都是 0
-1 ： < 0 会排在所有项目最前面
1：> 0，在其他项目order都为默认值0时，就会排在最后面
........
flex-grow ：利用一下容器剩下的这些水平位置上的空间，默认的值是 0，这个数字越大，它的宽度也就越大
在所有项目class样式中加入 flex-grow:1; 那么现在它们的宽度是一样的
想让某个项目的宽度大一些 .. 可以单独去设置一下这个项目的 flex-grow 属性的值
flex-basis：设置一下 flex 项目的初始宽度，默认auto
先去掉在项目上应用的这个 flex-grow，flex-basis: 100px , 现在所有项目初始化的宽度就是 100 像素
flex-shrink ：控制的是项目的缩小数，默认值是 1，调整一下页面的宽度 ，到一定程度的时候，会发现项目的宽度都会缩小
flex-shrink: 0 不想让某个项目缩小它的宽度
flex-shrink 的值设置成一个比 1 大的正数，调整页面的宽度 ，这个项目比其它的项目都会窄一些，更容易比其它的项目缩小宽度
flex：可以分别指定一下项目的 flex-grow，flex-shrink，还有 flex-basis 的值，它的值默认是 0 1 auto
align-self ：单独去控制容器里的某个项目的对齐方式，默认是 auto
flex-start，flex-end，center ， baseline 还有 stretch
justifyContent : enum('flex-start', 'flex-end', 'center',
center: 垂直居中
alignItems : enum('flex-start', 'flex-end', 'center', 'stretch')
alignSelf : enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
borderBottomWidth : number
borderLeftWidth : number
borderRightWidth : number
borderTopWidth : number
borderWidth : number
bottom : number
flex : number
flexDirection : enum('row', 'column')
flexWrap : enum('wrap', 'nowrap')
height : number
justifyContent : enum('flex-start', 'flex-end', 'center',
center: 垂直居中
'space-between', 'space-around')
left : number
margin : number
marginBottom : number
marginHorizontal : number
marginLeft : number
marginRight : number
marginTop : number
marginVertical : number
maxHeight : number
maxWidth : number
minHeight : number
minWidth : number
padding : number
paddingBottom : number
paddingHorizontal : number
paddingLeft : number
paddingRight : number
paddingTop : number
paddingVertical : number
position : enum('absolute', 'relative')
right : number
top : number
width : number
