如何解决div样式拉伸问题

现象描述：

当text组件的内容较多且显示多行的时候，相邻的div样式会显示异常，会从正常的圆形变为椭圆。

问题代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<template>   <div class="container">     <div style="align-items: center;">        <div class="typscolor" style="blue; opacity: 0.26; margin-left: 16px;"> </div>       <text>{{text}}</text>        <div class="typscolor" style="blue; opacity: 0.26; margin-left: 16px;"> </div>       <text>{{text}}</text>        <div class="typscolor" style="blue; opacity: 0.26; margin-left: 16px;"> </div>       <text>{{text}}</text>     </div>     </div> </template> <style>   .container {     flex-direction: column;     justify-content: center;     height: 100%;   }    text {     font-size: 24px;   }   .typscolor {       border-radius: 50%;       width: 30px;       height: 30px;       red;       margin-right: 8px;    } </style> <script>   module.exports = {     data: {       text:'text文本内容过多时左边的圆圈会被拉伸'     },     onInit() {     },   }      </script>

 代码运行效果，如下图所示：

                    

图1    异常	图2    正常

 

问题分析：

当text组件内容过多时，text组件宽度增加，相邻div宽度不够，flex布局宽度超出会自动压缩，从而导致div标签被拉伸了。

解决方法：

可以给div标签设置flex-shrink: 0属性，显示指定不压缩，即可解决该问题。

 

修改代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<template>   <div class="container">     <div style="align-items: center;">        <div class="typscolor" style="blue; opacity: 0.26; margin-left: 16px;"></div>       <text>{{text}}</text>        <div class="typscolor" style="blue; opacity: 0.26; margin-left: 16px;"></div>       <text>{{text}}</text>        <div class="typscolor" style="blue; opacity: 0.26; margin-left: 16px;"></div>       <text>{{text}}</text>     </div>     </div> </template> <style>   .container {     flex-direction: column;     justify-content: center;     height: 100%;   }    text {     font-size: 24px;   }   .typscolor {       border-radius: 50%;       width: 30px;       height: 30px;       red;       margin-right: 8px;        flex-shrink: 0;   /*加上该属性即可解决拉伸问题*/   } </style> <script>   module.exports = {     data: {       text:'text文本内容过多时左边的圆圈会被拉伸'     },     onInit() {     },   }      </script>

 

修改后代码运行效果如下图所示：

 

 

欲了解更多详情，请参见：

快应用通用样式介绍：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-common-settings#h1-1575449213432

 

原文链接：https://developer.huawei.com/...
原作者：Mayism