首页 > 其他 > 详细

Flex布局实现一部分元素左对齐,一部分右对齐

时间:2020-04-20 20:27:29      阅读:578      评论:0      收藏:0      [点我收藏+]

  

  在做一个列表的时候,单个Flex容器内有三个内联的靠右对齐的按钮,效果如图:

 

技术分享图片

 

 

  而我想让红色按钮靠左,而另外两个蓝色按钮保持靠右

  这个时候我们可以为红色按钮单独加上:margin-right : auto;

  效果如图:

 

 技术分享图片

 

 

  此效果的原理是:

 

  margin-right 不设置的话默认是0,父容器width 定宽之后,margin-right取值为 auto ,

  则自动占据了剩余的全部宽度 ------《css权威指南》

 

Flex布局实现一部分元素左对齐,一部分右对齐

原文:https://www.cnblogs.com/abcdecsf/p/12739944.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!