当前位置:首页 » 《关注互联网》 » 正文

flex布局 多种方法让两个盒子分布在左右两边

5 人参与  2024年04月19日 08:11  分类 : 《关注互联网》  评论

点击全文阅读


方法一:

一个父盒子里面包含了两个子盒子的,可以用justify-content:space-between属性

<div class='parent'>
 
<div class="left"></div>
 
<div class="right"></div>
 
</div>

 .parent {
 
display:flex;
 
flex-direction:row;
 
justify-content:space-between;
 
}

方法二:

先将子盒子靠右对齐

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

然后再单独给红色盒子设置flex:1;

原理:利用flex:1,动态填充宽度

方法三:

可以给红色盒子设置margin-right:auto;

原理: 父盒子设定宽度后,设置margin-right:auto的话会自动占据剩余的全部宽度

 

 


点击全文阅读


本文链接:http://zhangshiyu.com/post/97373.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1