关于flex布局中,父元素高度auto,由一子元素撑开,另一子元素自适应高度问题

夜雨入心

整体样式:

image.png

.expressRecord-single-close {//父元素样式
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;//重点  stretch
    position: relative;
}

右侧子元素撑开父元素高度:

image.png

.expressRecord-text {
    margin-left: 30rpx;
    padding-bottom: 20rpx;
    flex-shrink: 0;
    flex: 1;
}

需要实现的左侧子元素自适应父元素高度的样式:

image.png
可以看到子元素距离填满父元素仍有一段空间。

此时只需将父元素的 align-items: center;变为 align-items: stretch;
image.png
此时子元素盒子已经自适应父元素的高度。
align-items: stretch;实现是侧轴的拉伸。

阅读 4.4k
34 声望
0 粉丝
0 条评论
34 声望
0 粉丝
文章目录
宣传栏