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

　　而我想让红色按钮靠左，而另外两个蓝色按钮保持靠右怎么办？

方法一：

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

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

?方法二：

? ??

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

　　效果如图：

　　此效果的原理是：

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

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

方法三：

使用4个盒子?

中间的盒子设置成 弹性其他的两个盒子被撑到两边即可，

如代码：

.left{ height: 40px; ????width:100px; margin-left: 10px; } .blank-arae{ flex-grow: 1; /**自适应，能够填充空白区域**/ min-width: 400px; /**伸缩盒的底线。。。**/ } .right{ ???????width:100px; ????????height: 40px; }

方法四：

一个父盒子包含两个子盒子，两个子盒子可以排布在父盒子的两边。

使用?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; }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。