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;
}
相关推荐
LYFlied几秒前
前端路由核心原理深入剖析
前端
用户19017684478651 分钟前
vue3规范化示例
前端
用户19017684478653 分钟前
Git分支管理与代码合并实践:保持特性分支与主分支同步
前端
哈__12 分钟前
React Native 鸿蒙跨平台开发:下拉刷新功能
javascript·react native·react.js
没有鸡汤吃不下饭22 分钟前
前端打包出一个项目(文件夹),怎么本地快速启一个服务运行
前端·javascript
liusheng24 分钟前
Capacitor + React 的 iOS 侧滑返回手势
前端·ios
CUYG36 分钟前
v-model封装组件(定义 model 属性)
前端·vue.js
子洋38 分钟前
基于远程开发的大型前端项目实践
运维·前端·后端
用户350201588474841 分钟前
基于react-routet v7 的配置式 + 约定式路由系统 第一步:引入react-routerv7
前端
用户350201588474843 分钟前
基于react-routet v7 的配置式 + 约定式路由系统 第二步:一个简单的约定式路由系统
前端