上效果：
实现方式：
display:flex ，
行排列，默认靠左对齐，文章来源：https://www.toymoban.com/news/detail-589595.html
然后让第三个元素自动占满剩余的空间：flex-grow:1，text-align:end 文章来源地址https://www.toymoban.com/news/detail-589595.html
// wxml
<!-- 支付方式-->
<view class="payment_section">
<view class="payment_method">选择支付方式</view>
<view class="fz34 pay_item"><image class="pay_wt" src="/images/icon/wct.png"></image> 微信支付
<view class="check_btn_outer">
<image class="check_btn" src="/images/icon/checked_o.png"></image>
</view></view>
</view>
// wxss
.payment_method {
margin: 35rpx 0 40rpx 30rpx;
}
.pay_item {
display: flex;
align-items: center;
margin: 0 48rpx;
}
.pay_wt {
width: 70rpx;
height: 60rpx;
margin-right: 15rpx;
}
.check_btn {
width: 39rpx;
height: 39rpx;
}
.check_btn_outer {
flex-grow: 1;
text-align: end;
}
到了这里，关于css 3个元素行排列，前2个元素靠左，第三个元素靠右的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
