1. .container
   1. <flex-direction>
   2. <flex-wrap>
   3. <flex-flow>
   4. 水平<justify-content>
   5. 纵向<align-items>
   6. <align-content>
2. .item
   1. <order>
   2. <flex-grow>
   3. <flex-shrink>
   4. <flex-basis>
   5. <flex>
   6. 纵向<align-self>
3. 源文件在这里

这一篇是从css-trics抄到本人小本本上面的，现在又从小本本上腾到博客上来。
刚刚找原文，发现阮一峰也搬运过这一篇文章。

.container

flex的容器

1
2
3
4
5

{	display: flex;
	flex-direction: row | row-re | column | column-re;
	flex-wrap: nowrap | wrap | wrap-reverse;
	flex-flow: <flex-direction> || <flex-wrap>；
}

<flex-direction>

row 行
row-re 逆序行
column 列
column-re 逆序列

<flex-wrap>

nowrap 禁止自动换行
wrap 自动换行
wrap-reverse 自动换行，但是第一行会在下方

<flex-flow>

为上面两个属性的复合/速记属性。
规则：{flex-flow: <flex-direction> || <flex-wrap>；}
例：.container{flex-flow:row nowrap;}

水平<justify-content>

flex-start 聚拢靠左
flex-end 聚拢靠右
center 聚拢居中
space-between （行内）内容间距相同
sapce-around （行内）内容左右边距相同

纵向<align-items>

flex-start 向上对齐
flex-end 向下对齐
center 居中对齐
stretch 上下展开最大化
baseline 文字基线对齐

<align-content>

flex-start 聚拢靠上
flex-end 聚拢靠下
center 聚拢居中
stretch 展开最大化
space-between （块内）内容间距相同
space-around （块内）内容左右边距相同

.item

flex的内容

1
2
3
4
5
6

{	order: <integer>;
	flex-grow: <number>;
	flex-shrink: <number>;
	flex-basis: <length> || auto;
	flex: none || [ <flex-grow> <flex-shrink> || <flex-basis> ];
}

<order>

整数型，flex的内容会由order由小到大排列。
例：

1
2
3
4

.itemZ{ order: -1;}
.item0{ order: 0;}
.item1{ order: 1;} 
.item2{ order: 2;}

这样就是 Z-0-1-2 的熟悉排列。

<flex-grow>

数字，内容根据该数字的大小为比例放大。

<flex-shrink>

数字，内容根据该数字的大小为比例缩小。

<flex-basis>

长度或auto，内容按该长度伸缩剩余空间。
可以看这一篇文章详细了解<flex-fasis>属性。

<flex>

为上面三个属性<flex-grow>、<flex-shrink>、<flex-basis>的复合/速记属性。
规则： {flex: none || [ <flex-grow> <flex-shrink> || <flex-basis> ];}
例：.item{flex:1 1 auto;}

纵向<align-self>

auto 与容器相同
flex-start 向上对齐
flex-end 向下对齐
center 居中对齐
stretch 上下展开最大化
baseline 文字基线对齐

源文件在这里

按照自己的理解进行的整理，如有错误还请提醒。
以上。