阅读 210

Flex 布局 flex-grow 不生效

前言

最近在做项目时,添加了一个 table 标签,但是在给 tr 下面的每个 td 设置 flex-grow 属性时,td 并没有按照期望的均分 tr 的宽度。基于此做以下记录

flex-grow

查看官网文档,我们得知 flex-grow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。 注: 负数无效

父级元素: 容器(container)

容器子级元素: 项目(item)

代码如下:

<!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>
    <style>
         .container {
            width: 800px;
            height: 200px;
            border: 1px solid #ccc;
            margin: 20px auto;
            display: flex;
        }
        .item{
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
        }
        .item1{
            background-color: pink;
        }
        .item2{
            background-color: green;
        }
        .item3{
            background-color: rgb(2, 128, 231);
        }
        .item4{
            background-color: rgb(241, 150, 3);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <div class="item item4">item4</div>
    </div>   
</body>
</html>
复制代码

flex-grow:这是 项目 的一个属性,定义了项目的放大 比例,如果为0,即使有剩余空间也不会放大。

解决的问题:空间有多余时把多余空间分配给各个子元素(项目)。

通俗理解:以上面代码做说明,container 有800px 宽度,4个item 分别为100px,那么 container 剩余的宽度则为 400px,flex-grow 就是用来设置 item 怎样瓜分剩余空间(宽度)。

默认情况下 flex-grow 为0 则效果如下图所示:

image.png

当设置 item1、 item2 的 flex-grow 分别为1时,效果如下:

image.png flex-grow 计算方式如下:

  • 父级容器,宽度为 800px,4个 item 的宽度分别为 100px ,剩余空间为 800 - 4*100 = 400

  • item1 和 item 2 的 flex-grow 为1时 sum 值为1+1=2,所以 item1 的宽度为 100+ 1/2 *400 = 200

    item2 的宽度为 100+ 1/2 *400 = 200

    当设置 item1 的flex-grow 为1, item2 的 flex-grow 为2时, 效果如下:

image.png

image.png

image.png flex-grow 计算方式如下:

  • 父级容器,宽度为 800px,4个 item 的宽度分别为 100px ,剩余空间为 800 - 4*100 = 400

  • item1 和 item 2 的 flex-grow 为1 和 2 时 sum 值为1+2=3,所以 item1 的宽度为 100+ 1/3 *400 = 233.33

    item2 的宽度为 100+ 2/3 *400 = 366.67

所以综上所述,将所有item 的 flex-grow 值(正整数)相加得到分母sum,每个属性的数值作为分子,然后乘以剩余空间。

计算公式:分子 / 分母 * 剩余空间

剩余空间

flex-grow 重点说明落在 剩余 这两个字上,父元素剩余的空间,那什么算父元素剩余空间呢,简单的理解就是(父元素的宽度 - 子元素总和的宽度),这里有两种情况:

1. 子元素没有设置宽度:

那么整个父元素的宽度就是剩余宽度,这个时候 flex-grow 可以正常的发挥作用,但是在这种情况下的效果是一个伪分配,因为子元素没有设置宽度,那么子元素的宽度是自适应的,flex-grow 起到的作用更像是 min-width 的作用,一旦子元素 a 的内容超过这个分配的空间,那么就会重新计算剩余空间,剩余空间 = (父元素的宽度-子元素a的宽度),这个剩余宽度就会交给剩下的子元素进行分配,如果剩下的又发生以上的情况,计算依旧。如果直接设置width:100%,那么当前的子元素宽度总和已经超过父元素宽度,那么此时此刻 flex-grow 就无效了,因为没有剩余空间了。于是在这个时刻,就按照(子元素/子元素宽度总和)超出部分*依次给每个子元素减少宽度,也就是设置 100% 的话就是等分宽度,设置其他宽度的话按照公式自行计算即可。

2. 子元素设置了宽度:

如果子元素有宽度,那么这个时候flex-grow的作用就是把 剩余空间 = (父元素宽度-子元素总和宽度)按照 flex-grow 的数值分配给每一个子元素,这个时候 flex-grow 的作用就像是实实在在的 width 一样,给子元素增加宽度,在这种情况下的得到的效果就是一个无法改变的分配好的宽度,即使你子元素 a 的内容超出了分配好的宽度,也不会影响宽度分配情况,你只能用overflow来更好地美观一下啊,而这个就是我们希望的到的分配效果。

文章分类
前端