Flex布局

flex-direction : 用于设置主题方向，通过设置主轴方向可以规定项目的排列方向。
row ：默认值，设置主题从左到右水平方向

   flex-direction: row;

row-reverse ：主题为从右到左的水平方向 

   flex-direction: row-reverse;

 column : 主题从上到下的垂直方向 

  flex-direction: column;

   column-reverse : 主题从下到上的垂直方向

flex-direction: column-reverse; 

 justify-content: 用于设置项目在主题上的对齐方式;
  flex-start:表示项目对齐到主轴起点，项目间不留空隙

justify-content: flex-start;

fex-end:项目对齐到主轴终点，项目间不留空隙

justify-content: flex-end;

    center：项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离。

justify-content: conter;

space-between：两端对齐，两端的项目分别靠向容器的两端，其他项目之间的间隔相等。

justify-content: space-between;

    space-around：每个项目之间的距离相等，第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半。

    justify-content: space-around;

align-items属性

center: 项目在交叉轴的中间位置对齐。

  align-items: conter;

   flex-start:项目顶部与交叉轴起点对齐。

align-items: flex-start;

   flex-end: 项目底部与交叉轴终点对齐

align-items: flex-end;

   baseline: 项目的第一行文字的基线对齐。

  align-items: baseline;

 flex-wrap属性:
    flex-wrap属性用于规定是否允许项目换行，能够设置多行排列时换行的方向
nowrap：默认值，表示不换行，如果单行内容过多，项目宽度可能会被压缩