1、display
该属性用来指定元素是否为伸缩容器
flex | inline-flex
flex用于产生块级伸缩容器
inline-flex用于产生行级伸缩容器
2、flexDirection
该属性指定主轴方向
row | row-reverse | column | column-reverse
row(默认值),伸缩容器若为水平方向轴，伸缩项目的排版方式从左向右排列
注：flex－direction默认为row，如果容器是横向伸缩，不用定义
row-reverse伸缩容器若为水平方向，伸缩项目的排版方式为从右到左
column伸缩容器若为垂直方向轴，伸缩项目的排版方式为从上向下排列
column-reverse伸缩容器若为垂直方向轴，伸缩项目的排版方式为从下向上排列
3、flex-wrap
该属性主要来指定伸缩容器的主轴线方向空间不足的情况下，是否换行以及该如何换行
wrap | nowrap | wrap-reverse.
wrap:伸缩容器空间不足的情况下允许换行。若主轴为水平轴，换行方向为从上到下
wrap-reverse伸缩容器空间不足的情况下允许换行。若主轴为水平轴，换行方向为从下到上
4、flex-flow
该属性是flex-direction和flex-wrap属性的缩写版本，他同时定义了伸缩容器的主轴和侧轴，其默认值为row nowrap。
flex-direction flex-wrap
5、justify-content
该属性来定义伸缩项目沿主轴线的对其方式
:flex-start | flex-end | center | space-between | space-around
flex-start：伸缩项目向主轴线的起始位置靠齐。
flex-end：伸缩项目向主轴线的结束位置靠齐。
center：伸缩项目向主轴线的中间位置靠齐。
space-between：伸缩项目会平均的分布在主轴线里。第一个伸缩项目在主轴线的开始位置，最后一个伸缩项目在主轴线的重点位置。
space-around：伸缩项目会平均的分布在主轴线里。两端保留一半的空间。
6、align-items
该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式，其语法为：
align-items:flex-start | flex-end | center | baseline | stretch
flex-start（默认值）：伸缩项目向交叉轴的起始位置靠齐。
flex-end：伸缩项目向交叉轴的结束位置靠齐。
center：伸缩项目向交叉轴的中间位置靠齐。
baseline：伸缩项目根据它们的基线对齐。
stretch：伸缩项目根据它们的基线对齐。
7、align-content
这个属性主要用来调整伸缩项目出现换行后在交叉轴上的对齐方式，类似于伸缩项目的主轴上使用justify-content，语法：
align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex-start：伸缩项目向交叉轴的起始位置靠齐。
flex-end：伸缩项目向交叉轴的结束位置靠齐。
space-between：伸缩项目向交叉轴中平均分布。
space-around：伸缩项目向交叉轴中平均分布，且在两边各有一班的空间。
stretch(默认值)：伸缩项目将会在交叉轴上伸展以占用剩余空间。
center：伸缩项目将会向交叉轴的中间位置靠齐。