【前端】flex-grow （分配剩余空间）的正确打开方式

最新推荐文章于 2024-07-09 16:38:59 发布

@shenyuchen

最新推荐文章于 2024-07-09 16:38:59 发布

阅读量5.6k

点赞数 9

文章标签： flex-grow 前端 web 布局分配剩余空间

本文为博主原创文章，未经博主允许不得转载。（当然点赞收藏后随意）

本文链接：https://blog.csdn.net/shenli_MLZS/article/details/86216796

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用前提

flex-grow 这个属性，是在 display: flex ; 的情况下使用的

简单介绍

是用来分配剩余空间的（所以，这里还有个前提，就是有空间可以分）；

举个栗子

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <title>flex-grow_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
        h1{
            font:bold 20px/1.5 georgia,simsun,sans-serif;
        }
        .box{
            display:-webkit-flex;
            display:flex;
            width:600px;
            margin:0;
            padding:10px;
            list-style:none;
            background-color:#eee;
        }
        .box li{
            width:100px;
            height:100px;
            border:1px solid #aaa;
            text-align:center;
        }
        #box li:nth-child(2){
            -webkit-flex-grow:1;
            flex-grow:1;
        }
        #box li:nth-child(3){
            -webkit-flex-grow:2;
            flex-grow:2;
        }
    </style>
</head>
<body>
<h1>flex-grow示例：</h1>
<ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>
</body>
</html>

展示的长宽如下所示（长 x 宽）

在这里插入图片描述

听我解释

先说一下，为什么每个的宽度和长度都似乎多出了 2px ；其实不是多的，是因为border: 1px; 所设置的，我认为这个例子好就好在这里，看谷歌调试图：
在这里插入图片描述

这样一来，三个（a ， d ， e ）的宽是 102px 就可以接受了，接下来是b 和 c ;

## b 的设置如下

        #box li:nth-child(2){
            -webkit-flex-grow:1;
            flex-grow:1;
        }

表示：在剩下的空间中，需要占1份；

c的设置如下

        #box li:nth-child(3){
            -webkit-flex-grow:2;
            flex-grow:2;
        }

表示：在剩下的空间中，需要占2份；
因为，设置的时候，总份是 600 - 5 * （ 100 + 2 ）= 90 [注意：这里的数字 2 是 border的左右两边各占了 1px 的原因 ]
又因为 b ： c = 1 ：2
所以 b ： c = 30 ： 60
故：就会有 b 的宽度为：30 + 102 = 132px
c 的宽度为：60 + 102 = 162px

@shenyuchen

关注

9
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
【前端】flex-grow （分配剩余空间）的正确打开方式

使用前提flex-grow 这个属性，是在 display: flex ; 的情况下使用的简单介绍是用来分配剩余空间的（所以，这里还有个前提，就是有空间可以分）；举个栗子&lt;!DOCTYPE html&gt;&lt;html lang="zh-cmn-Hans"&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt
复制链接

扫一扫