flex-direction属性是设置主轴的方向

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

row: 默认值，表示沿水平方向，由左到右。

row-reverse ：表示沿水平方向，由右到左

column：表示垂直方向，由上到下

column-reverse:表示垂直方向，由下到上

flex-wrap属性用于设置当项目在容器中一行无法显示时如何处理

nowrap：表示不换行

wrap：正常换行，第一个位于第一行的第一个

wrap-reverse：向上换行，第一行位于下方

flex-flow属性是flex-direction和flex-wrap的缩写，默认值为【row nowrap】

justify-content属性是设置项目在容器中的对齐方式

flex-start、flex-end、center、space-around（平分剩余空间）、space-between（先两边贴边，再平分剩余空间）、space-evenly（弹性盒子和容器之间的间距相等）

align-items 属性用来设置项目在交叉轴方向上的对齐方式

flex-start 沿着交叉轴方向 起点 对齐（默认值）。

flex-end 沿着交叉轴方向 结尾 对齐。

center 沿着交叉轴方向 居中 对齐。

baseline 沿着交叉轴方向，按照项目内的文字对齐。

stretch 沿着交叉轴方向自动进行拉升到最大。

align-content:在多行使用，与justify-content是另一个轴的关系

align-items适用子元素单行的情况下，只有上对齐、下对齐、居中和拉伸

align-conetnt适用于子元素多行的情况下（单行情况下无法生效），可设置上对齐、下对齐、居中，平分侧轴剩余的空间、靠近两端再平分剩余空间和拉伸 属性值

总的来说单行使用align-items，多行使用align-conetnt

align-self 属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。

order属性设置项目排序的位置，默认值为0，数值越小越靠前.

nth-child 和 nth-of-type 的区别?