Flex布局实现子元素左右对齐

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

Flex布局实现子元素左右对齐

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

  方法A:

为红色按钮单独加上:flex: 1
此效果的原理是:利用flex:1,动态填充宽度

  方法B:

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

效果如图:

Flex布局实现子元素左右对齐

此效果的原理是:

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

则自动占据了剩余的全部宽度

版权声明:kkvexl 发表于 7月 26, 2021 3:26 下午。
转载请注明:Flex布局实现子元素左右对齐 | WP之家

相关文章

暂无评论

暂无评论...