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


  

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

 

 

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

 

  方法A:

 

   为红色按钮单独加上:flex: 1 

  此效果的原理是:利用flex:1,动态填充宽度

 

 

  方法B:

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

  效果如图:

 

 

  

  此效果的原理是:

 

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

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

 

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM