首页 前端知识 flex布局(分布在两边)(靠左显示)(靠右显示)(元素换行后的对齐方式)(是否换行显示 )

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

2024-09-10 23:09:39 前端知识 前端哥 170 595 我要收藏

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;
 }
转载请注明出处或者链接地址:https://www.qianduange.cn//article/18042.html
标签
评论
发布的文章

JSON简介

2024-09-30 23:09:25

Node.js和npm的安装及配置

2024-09-30 23:09:02

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!