CSS - flex 弹性布局容器固定宽度，内容不固定时，文字换行问题

最新推荐文章于 2024-05-08 11:44:15 发布

刘建状

最新推荐文章于 2024-05-08 11:44:15 发布

阅读量2.5k

点赞数 1

分类专栏： css js Element ui 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_54259790/article/details/118752150

版权

js 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

Element ui

5 篇文章 0 订阅

订阅专栏

## 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        .box{
            width: 200px;
            height: 50px;
            display: flex;
            margin-bottom: 10px;
        }

        .box p{
            width: 90%;
            background-color: red;
        }

        .box span{
            /* width: 90%; */
            background-color: blue;
        }
    </style>
</head>
<body>
    
    <div id="app">
        
        <div class="box" v-for="val,ind in demo">

            <span>{{val.text}}</span>

            <p></p>

        </div>

    </div>



    <script>
        new Vue({
          el: '#app',
          data: {

                demo:[
                    {text:'我去'},
                    {text:'你在干嘛啊'},
                    {text:'哈喽'},
                ]

          }
        })
    </script>


</body>
</html>

如图：
在这里插入图片描述

解决方法：

flex布局中的： flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

注：这个属性要添加在子元素上

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        .box{
            width: 200px;
            height: 50px;
            display: flex;
            margin-bottom: 10px;
        }

        .box p{

            width: 90%;
            background-color: red;

            /* 新加 */
            flex-shrink:1;
        }

        .box span{


            background-color: blue;

            /* 新加 */
            flex-shrink:0;  
        } 
    </style>
</head>
<body>
    
    <div id="app">
        
        <div class="box" v-for="val,ind in demo">

            <span>{{val.text}}</span>

            <p></p>

        </div>

    </div>



    <script>
        new Vue({
          el: '#app',
          data: {

                demo:[
                    {text:'我去'},
                    {text:'你在干嘛啊'},
                    {text:'哈喽'},
                ]

          }
        })
    </script>


</body>
</html>

效果图：

在这里插入图片描述

刘建状

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS - flex 弹性布局容器固定宽度，内容不固定时，文字换行问题

## 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
复制链接

扫一扫