整体样式:
.expressRecord-single-close {//父元素样式
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
align-items: center;//重点 stretch
position: relative;
}
右侧子元素撑开父元素高度:
.expressRecord-text {
margin-left: 30rpx;
padding-bottom: 20rpx;
flex-shrink: 0;
flex: 1;
}
需要实现的左侧子元素自适应父元素高度的样式:
可以看到子元素距离填满父元素仍有一段空间。
此时只需将父元素的 align-items: center;变为 align-items: stretch;
此时子元素盒子已经自适应父元素的高度。
align-items: stretch;实现是侧轴的拉伸。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。