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;
}