弹性布局

flex-direction:决定主轴排列方向

  参数：row（默认）：主轴为水平方向，起点在左端。

              row-reverse：主轴为水平方向，起点在右端。

              column：主轴为垂直方向，起点在上端。

              column-reverse：主轴为垂直方向，起点在下端。

flex-wrap:如果总宽度超过屏幕宽度,决定是否换行

参数：nowrap（默认）：不换行，所有item在一行。

            wrap：换行，第一行在上方

            wrap-reverse：换行，第一行在下方

flex-flow:flex-direction和flex-wrap的缩写

例：flex-flow：row  wrap；

justify-content�:决定主轴方向的对齐方式

参数：flex-start(默认)：对齐主轴的起点

            flex-end：对齐主轴的终点

            center：在主轴方向居中

            space-between:左右不留空 平分位置

            space-around: 左右留空 平分位置

            stretch（默认值）:轴线占满整个交叉轴。

align-items:决定交叉轴的对齐方式

参数：flex-start(默认)：对齐交叉轴的起点

            flex-end：对齐交叉轴的终点

            center：在交叉轴方向居中

            baseline：以项目之间的第一行文字的基线对齐。

            stretch（默认）:如果项目未设置高度或设为auto，将占满整个容器的高度。

注:align-items和align-content的区别:前者适用于单行容器，而后者只适用于多行

flex：给子元素设置，子元素将按照这个属性数字的比例分配空间。

参数：数字：项目占据父元素的空间比例，填满容器。

           auto：如果超过父元素尺寸，项目尺寸会等比例缩小，如果不足父元素的尺寸，会等比例放大以填满容器。

          none：项目尺寸不变化。

order:决定项目的排列顺序；越小越靠前，最小为0

align-self:给自身设置交叉轴的对齐方式，可覆盖父级的 align-items属性，参数和align-items相同。

注:无justify-self这个属性。