如何使用vue中的flex的相关属性？

前言：
display：用于确定类型

• align-self属性：align-self 属性用来设置项目在交叉轴方向上的对齐方式，设置在项目上，作用单个项目。
  1. auto 表示继承容器的 align-items 属性。（默认值）
  2. flex-start 沿着交叉轴方向 起点 对齐（默认值）。
  3. flex-end 沿着交叉轴方向 结尾 对齐。
  4. center 沿着交叉轴方向 居中 对齐。
  5. baseline 沿着交叉轴方向，按照项目内的文字对齐。
  6. stretch 沿着交叉轴方向自动进行拉升到最大。

• display：flex
  row(默认)
  row-reverse(从右到左)
  column y轴
  column-reverse y轴从下往上
  flex-direction:column/column-reverse/row/row-reverse;
  flex-direction:column-reverse;
  nowrap(默以不换行)
  wrap(换行)
  wrap-reverse(换行从下往上)
  flex-wrap:nowrap/wrap/wrap-reverse;
  flex-wrap:wrap-reverse
  这个是direction和wrap的结合*/ /flex-flow:direction wrap;
  f1ex-start(左对齐)
  fIex-end(右对齐)
  space-around(每项目的间隔相等但是左右两侧是间隔的一半)
  space-between(左右贴边，间距相等)space-evenly(所有间隔t均分)
  justify-content:space-evenly;* /操作侧轴/ /*flex-start(左对齐)
  f1ex-end(交叉轴的终点对齐)
  center(侧轴居中)
  baseline(基线对齐)
  stretch(默认值如果项目没有设置高度他是沾满整个容器)

• 内容对齐(justify-content)属性
  应用在弹性容器上，把弹性项沿着弹性容器的主轴线(main axis)对齐。 该操作发生在弹性长度以及自动边距被确定后。它用来在 存在剩余空间时如何加以分配，也会在发生内容溢出时影响项目的 对齐。
  注意：弹性布局中有两个基本术语main axis和cross axis,一般情况下，我们可以把它们各自看作是屏幕上的行向和列向 (但是严格讲，这和写模式以及弹性流方向有关)。
  那么main-starti和main-end就可以分别被看作是弹性容器的左右边。
  justify-contenti语法如下： justify-content:flex-start flex-end center space-between space-around（相关属性的解释以上有说明）