小程序,一行,view占满剩余空间


小程序,一行,view占满剩余空间

在小程序中,有类似效果的界面
16248515864190

  • 左边标题,右边是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会占据一行中剩余宽度


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM