官网上写道
flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。 flex {number}:值为 number 类型。
经常用作自适应布局,将父容器的display:flex,侧边栏大小固定后,将内容区flex:1,内容区则会自动放大占满剩余空间。
但是最近开发的时候发现
<div style="width:750rpx; background-color:#09BB07;">
<div style="flex-direction: row; display:flex;">
<div style="width:50px; height:50px; background-color: #0033FF;"></div>
<div style="background-color:#0077AA; flex:1;">
<text>name</text>
<text>测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十</text>
<text>time 回复</text>
</div>
</div>
</div>
同样的写法在 低版本安卓上没问题 但是在高版本安卓会导致文字显示不全
琢磨后发现是要在包裹文字的父元素上写上 width:750rpx;
修改后:
<cell class="xiaoxikuai">
<div style="width:750rpx; background-color:#09BB07;">
<div style="flex-direction: row; display:flex;">
<div style="width:50px; height:50px; background-color: #0033FF;"></div>
<div style="background-color:#0077AA; flex:1; width:750rpx;">
<text>name</text>
<text>测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十</text>
<text>time 回复</text>
<div style="width:750rpx; background-color:#09BB07;">
<div style="flex-direction: row; display:flex;">
<div style="width:50px; height:50px; background-color: #0033FF;"></div>
<div style="background-color:#0077AA; flex:1; width:750rpx;">
<text>name</text>
<text>测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十测试一二三四五六七八九十</text>
<text>time 回复</text>
</div>
</div>
</div>
<text>更多</text>
</div>
</div>
</div>
</cell>