微信小程序view中子view排列方式以及垂直居中

.wxml文件：列表中的每一个item，有三部分，高度不同，item高度根据内容显示高度，item中的子view垂直居中

< view wx:for = "{{ dataWeekList }}" wx:for-item = "item">

< view class = "separate"></ view >

< view class = "viewweek">

< view class = 'viewday'>

< text > {{item.dayofmonth}}\n{{item.dayofweek}} </ text >

</ view >

< view class = 'viewtimetask'>

< view wx:for = "{{ item.timetask }}" wx:for-item = "itemday">

< text > {{itemday.time}}\t{{itemday.task}} </ text >

</ view >

</ view >

< view class = 'item_image'>

< text > > </ text >

</ view >

</ view >

</ view >

.wxss文件

.viewweek {

background: #ffffff ;

border-radius: 20 rpx ;

display: flex ;

flex-direction: row ;

padding-top: 10 rpx ;

padding-bottom: 10 rpx ;

/**其中子view垂直居中显示*/

align-items: center ;

}

.separate {

height: 20 rpx ;

background: #f5f5f5 ;

}

.viewday {

background: #dddddd ;

border-radius: 20 rpx ;

margin-left: 20 rpx ;

margin-right: 20 rpx ;

text-align: center ;

padding: 20 rpx ;

}

.item_image {

width: 22 rpx ;

height: 22 rpx ;

margin-right: 40 rpx ;

position: absolute ;

right: 0 rpx ;

align-content: center ;

color: #999999 ;

}

.viewtimetask {

color: #333333 ;

font-size: 28 rpx ;

display: flex ;

flex-direction: column ;

flex: 1 ;

}

在父级别vview中设置 align-items: center;子view可垂直居中

display: flex ;弹性容器

flex-direction: row ;子view排列方式row--水平 column--垂直
flex在子view中设置，flex：1；表示出去其他子view后，剩下的款或高全部分给该view
text-align: center;文本居中对齐
border-radius: 20rpx;设置view圆角弧度