css flex布局，小程序flex布局，垂直居中完美解決
flex彈性布局，很好的解決了垂直居中的問題，上代碼：
wxml:
<view class='container'>
<view class='item item1'>item1</view>
<view class='item item2'>item2</view>
<view class='item item3'>item3</view>
</view>
wxss:
.container{
width: 100%;
padding-top: 50rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.item{
background: darkred;
color: #fff;
width: 150rpx;
text-align: center;
}
.item1{
height: 100rpx;
line-height: 100rpx;
}
.item2{
height: 150rpx;
line-height: 150rpx;
}
.item3{
height: 120rpx;
line-height: 120rpx;
}
效果圖:
posted on 2019-04-02 14:51 阿翟的cnblogs 閱讀(570) 評論(0) 收藏 舉報
浙公網安備 33010602011771號