而我想让红色按钮靠左,而另外两个蓝色按钮保持靠右怎么办?
方法一:
为红色按钮单独加上:flex: 1
此效果的原理是:利用flex:1,动态填充宽度
方法二:
这个时候我们可以为红色按钮单独加上:margin-right : auto;
效果如图:
此效果的原理是:
margin-right 不设置的话默认是0,父容器width 定宽之后,margin-right取值为 auto ,
则自动占据了剩余的全部宽度 ------《css权威指南》
方法三:
使用4个盒子
中间的盒子设置成 弹性其他的两个盒子被撑到两边即可,
如代码:
方法四:
一个父盒子包含两个子盒子,两个子盒子可以排布在父盒子的两边。
使用 justify-content:space-between; 属性即可。