css——flex布局
display:flex 如何实现各行元素的高度自适应
//先定义一个最大的容器为弹性盒子,子元素为横向排布
.list {
display: flex;
flex-direction: row;
justify-content: space-between;
// 使每个弹性盒子保持自身的高度,并位于容器顶部
align-items: flex-start;
}
//横向排布的两个子元素都设置为纵向排布的弹性盒子
.list_item{
width:50%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.items {
width:78%;
background-color: #99cccc;
padding: 20rpx;
margin-top: 20rpx;
border-radius: 30rpx;
}