css 3个元素行排列,前2个元素靠左,第三个元素靠右

上效果:

实现方式:

display:flex ,

行排列,默认靠左对齐,

然后让第三个元素自动占满剩余的空间:flex-grow:1,text-align:end

复制代码
// 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;
}
相关推荐
玖月晴空4 分钟前
探索关于Spec 和Skills 的一些实战运用-Kiro篇
前端·aigc·代码规范
子兮曰8 分钟前
深入理解滑块验证码:那些你不知道的防破解机制
前端·javascript·canvas
Highcharts.js11 分钟前
【Highcharts】如何用命令行渲染导出图片?
javascript·导出·开发文档·highcharts·命令行渲染·命令行功能
会一丢丢蝶泳的咻狗34 分钟前
Sass实现,蛇形流动布局
前端·css
攀登的牵牛花39 分钟前
前端向架构突围系列 - 状态数据设计 [8 - 4]:有限状态机 (FSM) 在复杂前端逻辑中的应用
前端
Lsx_39 分钟前
前端视角下认识 AI Agent 和 LangChain
前端·人工智能·agent
陈振wx:zchen20081 小时前
JavaScript
javascript·js
我是伪码农1 小时前
Vue 智慧商城项目
前端·javascript·vue.js
不认输的西瓜1 小时前
fetch-event-source源码解读
前端·javascript
用户39051332192881 小时前
前端性能杀手竟然不是JS?图片优化才是绝大多数人忽略的"降本增效"方案
前端