justify-content：
- flex-start: 元素和容器的左端对齐。
- flex-end: 元素和容器的右端对齐。
- center: 元素在容器里居中。
- space-between:元素之间保持相等的距离。
- space-around:元素周围保持相等的距离。
align-items（align-self 控制单个元素）
- flex-start: 元素与容器的顶部对齐。
- flex-end: 元素与容器的底部对齐。
- center: 元素纵向居中。
- baseline: 元素在容器的基线位置显示。
- stretch: 元素被拉伸以填满整个容器。
flex-direction
- row: 元素摆放的方向和文字方向一致。
- row-reverse: 元素摆放的方向和文字方向相反。
- column: 元素从上放到下。
- column-reverse: 元素从下放到上。
flex-wrap
- nowrap: 所有的元素都在一行。
- wrap: 元素自动换成多行。
- wrap-reverse: 元素自动换成逆序的多行
flex-direction和flex-wrap两个属性经常会一起使用。所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。
举个例子，你可以用flex-flow: row wrap
align-content
- flex-start: 多行都集中在顶部。
- flex-end: 多行都集中在底部。
- center: 多行居中。
- space-between: 行与行之间保持相等距离。
- space-around: 每行的周围保持相等距离。
- stretch: 每一行都被拉伸以填满容器。
order
有时候仅仅调转行或列的方向是不够的。在这些情况，我们可以设置单个元素的order属性。元素的属性默认值为0，但是我们设置这个属性为正数或负数。
例：order: 1;
