flex布局简直是万能的
一、需求
微信小程序中一列中一个居左,一个居中
二、实现
利用flex布局
<view class="total_price">
<view class="item_wrap">
<image bindtap="showGoods" src="../../static/img/jian.svg"></image>
</view>
<view class="item_wrap">
<view class="total">合计:¥{{allPrice}}</view>
</view>
<view class="item_wrap"></view>
</view>
- 先在每个部分外包裹一个大
view
,对这个大view
进行flex布局 - 对每个大
view
中的元素通过text-align
进行排列
.total_price{
background-color: #d7d7d7;
width: 100%;
display: flex;
height: 60rpx;
padding:0 20rpx;
line-height: 60rpx;
.item_wrap{
flex: 1;
}
image{
padding: 0;
margin: 0;
height: 60rpx;
line-height: 60rpx;
width: 42rpx;
}
.total{
text-align: center;
}
}