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