flex-grow布局子元素宽度过大撑开了父元素的解决方法,实现固定宽和自适应的布局

来源:赵克立博客 分类: 前端设计 标签:flexcss发布时间:2019-05-04 15:08:11最后更新:2019-05-12 16:51:46浏览:1080
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
温馨提示:
技术类文章有它的时效性,请留意文章更新时间以及软件的版本
更新时间:
2019-05-12 16:51:46

chrome内核兼容性

从我手边已有的版本测试结果兼容 Chrome/39.0.2171.95 - Chrome/74.0.3729.131


水平布局实现

重要的概念先说一下 flex-grow 该属性用来设置当父元素的宽度大于所有子元素的宽度的和时(即父元素会有剩余空间),子元素如何分配父元素的剩余空间

flex布局让前端布局又多啦一个方案,下面想实现这个后台常用的布局,左边一栏菜单300px  这样父元素还剩多少空间都让右边占用从来实现自动宽度,样式如下,是我们想要的效果

GIF.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>flex布局测试</title>
    <style type="text/css">
    html,
    body {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
    .main {
        height: 100%;
        width: 50%;
        margin: 0px auto;
        display: flex;
    }
    .left,
    .right {
        height: 100%;
    }
    .left {
        width: 300px;
        background: #ededed;
    }
    .right {
        flex-grow: 1;
        background: #f00;
    }
    .text {
        white-space: nowrap;
        overflow: auto;
    }
    </style>
</head>
<body>
    <div class="main">
        <div class="left">
            300px
        </div>
        <div class="right"> 这些点位文字
            <div class="text">一些元素</div>
            下面一些文字</div>
    </div>
</body>
</html>

但是如果有些下面这样的布局,右边有一块代码块要宽度肯定是不固定的可能会非常宽,于是想让他过宽的话就把那一块出现滚动条也就是overflow:auto,但是布局不像预期中的那样,如下

image.png

从这里可以看出如果右边子元素的宽度大于父窗口的宽减去左边的300px时右边的父元素会被撑开挤占左边的宽度,下面有个解决方法,目录 谷歌74.0.3729.131 火狐66.0.3  ie11  edge测试通过,把右边元素的宽度设置为0如下;

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>flex布局测试</title>
    <style type="text/css">
    html,
    body {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
    .main {
        height: 100%;
        width: 50%;
        margin: 0px auto;
        display: flex;
    }
    .left,
    .right {
        height: 100%;
    }
    .left {
        width: 300px;
        background: #ededed;
    }
    .right {
        flex-grow: 1;
        width: 0px;
        background: #f00;
    }
    .text {
        white-space: nowrap;
        overflow: auto;
    }
    </style>
</head>
<body>
    <div class="main">
        <div class="left">
            300px
        </div>
        <div class="right"> 这些点位文字
            <div class="text">一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素</div>
            下面一些文字</div>
    </div>
</body>
</html>

可以运行代码后把里面设置的width:0px去掉,查看上面出现的那种情况

对上面情况的理解

出现上面的情况可能是因为,要分配父元素的剩余空间首先得元素的宽度渲染出来然后计算有没有剩余的空间,而右边内容计算出来宽度已经把右边容器撑开啦所有子元素的和已经超过啦父元素的宽,如果把右边容器先设置为width:0px;计算的时候就只有左边的宽度啦,这样就可以重新分配宽度啦

下一篇 

flex-grow实现上下两栏自适应布局

注意:flex:1是 flex-grow flex-basis  flex-shrink这三个的缩写,但是据我测试直接写成flex:1时谷歌 火狐显示不一至,写成flex:1 1 auto;时就可以啦


微信号:kelicom QQ群:215861553 紧急求助须知
点击更换验证码
Win32/PHP/JS/Android/Python