1、flex-direction(子元素的排列方向)
flex-direction: row | row-reverse |column | column-reverse
row :主轴为水平方向，起点在左边
row-reverse:主轴为水平方向，起点在右边
column: 主轴为垂直方向，起点在上边
column-reverse: 主轴为垂直方向，起点在下边

2、flex-wrap(子元素是否换行)
flex-wrap: nowrap | wrap | wrap-reverse
nowrap: 不换行（默认）
wrap: 换行，第一行在上
wrap-reverse: 换行，第一行在下

3、flex-flow(前两个的结合)
flex-flow: || 默认row nowrap
示例(row wrap)

4、justify-content(子元素在横轴上的排版)
justify-content:flex-start|flex-end|center|space-between|space-around
flex-start: 默认 左对齐
flex-end: 右对齐
center: 居中
space-between: 两端之间，间隔相等
space-around: 子元素间隔相等,且子元素之间的间隔比子元素与父元素的距离大一倍

5、align-items(子元素纵轴上的排列)
align-items: flex-start | flex-end | center | baseline | stretch
flex-start: 交叉轴的起点对齐
flex-end: 交叉轴的终点对齐
center: 交叉轴的中点对齐
baseline: 子元素第一行文字的基线对齐
Stretch: 子元素未设置高度或auto将占满整个容器高度，如有设置宽度则无效

6、align-content(子元素纵轴上的排列)
align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex-start: 子元素从纵轴的起点开始排列，且行间没有间距
flex-end: 与纵轴的终点对齐，且行间没有间距。
center: 与纵轴的中点对齐
space-between: 与纵轴两端对齐，轴线之间的间隔平均分布
space-around: 每行子元素的间隔都相等，且每行子元素之间的间隔比子元素到父元素的距离大一倍
stretch: 默认 每行子元素默认排列，相当于只设置了lex-wrap:wrap，每行子元素间有一定间隔

1、order(子元素纵轴上的排列)
order: 数值，数值越小排列越靠前

2、flex-grow(子元素的放大比例 默认为0)

3、flex-shrink(子元素的缩小比例 默认为1)

4、flex-basis(子元素的理想宽度，默认auto)
flex-basis: | auto

5、flex(flex-grow、flex-shrink、flex-basis的组合)
flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ] 默认 0 1 auto
flex: auto表示flex: 1 1 auto
flex: none表示flex: 0 0 auto

6、align-self(子元素的纵轴排列方式)
align-self允许单个元素与其他元素有不一样的排列方式可以覆盖align-items默认值是auto
align-self: auto | flex-start | flex-end | center | baseline | stretch