问题:父元素使用display属性,子元素使用flex:1;属性,给子元素设置边框时会占满一行。
解决思路:给子元素再加一个 view 标签,在这个标签设置 flex:1;属性,子元素设置边框。
示例:
HTML:
<view style="flex: 1;">
<view class="insure">保险</view>
</view>
CSS:
.insure {
font-size: 12px;
color: #d78556;
border: 1px solid #f0e8d6;
width: 37px;
height: 29px;
padding: 5px;
border-radius: 5px;
}