小程序,一行,view占满剩余空间
在小程序中,有类似效果的界面
- 左边标题,右边是value
- 标题和value都是不定宽
- 右侧使用input时,在value特别长的时候会显示不全,需要拖动
用什么样式处理这种问题?
答案是:flex-grow
.container {
display: flex;
}
.title-wrapper {
display: flex;
flex-grow: 0;
margin-left: 40rpx;
height: 100%;
}
.input-wrapper {
height: 100%;
flex-grow: 1;
}
在flex布局下,使用flex-grow属性
input外层 用一个view包住 class="input-wrapper"
如上写法,input-wrapper会占据一行中剩余宽度