flex布局（分布在两边）（靠左显示）（靠右显示）（元素换行后的对齐方式）（是否换行显示 ）

flex布局（分布在两边）（靠左显示）（靠右显示）（元素换行后的对齐方式）（是否换行显示 ）
flex布局 两个盒子分布在两边，在父盒子上写上：

	display: flex;
	flex-direction:row;
	justify-content:space-between; 

flex布局 两个盒子靠左显示，在父盒子上写上：

   display: flex;
	flex-wrap: wrap;
	align-content: flex-start;

flex布局 两个盒子靠右显示，在父盒子上写上：

display: flex;
flex-direction: row;
justify-content: flex-end;

两端对齐,中间自适应

 justify-content: space-between; 

设置元素是否换行显示

        flex-wrap: nowrap; 
        flex-wrap: wrap;

设置元素换行后的对齐方式

      align-content: flex-start; 
      align-content: flex-end; 
      align-content: center; 
      align-content: space-between; 
      align-content: space-around; 

其他案例：

<div class="videoMain">
  <div class="video" v-for="num in 8" :key="num"></div>
    <i v-for="num in 3" :key="num"></i>
</div>

 i{
    width: 342px;
 }