flex布局出现bug的解决方法

最新推荐文章于 2024-07-21 08:56:16 发布

little_蔷薇

最新推荐文章于 2024-07-21 08:56:16 发布

阅读量3.1k

点赞数

分类专栏：前端文章标签： flex布局的坑

本文链接：https://blog.csdn.net/qq_34559257/article/details/80581765

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

（1）使用flex-basis出现bug

 <style>
        .big{
            width: 400px;
            height: 100px;
            background-color: lightcoral;
            margin:0 auto;
            display:flex;
        }
        .left{
            flex-basis:100px;
            background-color: black;
        }
        .right{
            flex:1;
            /* 解决方法就是给该元素加上overflow:hidden; */
            overflow: hidden;
        }
        p{
            width: 100%;
            word-wrap: wrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

    </style>
     <div class="big">
        <div class="left"></div>
        <div class="right">
            <p>hello123hello12helloheloolhello3hello123hello123</p>
        </div>
    </div>

（2）flex-flow分配出现问题，当所有子元素都是flex-flow:1;当其中一个子元素内容很多时，没有等比例缩放，这个时候有两种解决方法：把flex-flow:1改为flex：1。另外一种解决方法是：flex-basis:%0;再flex-flow:1之后加上这句。