×
  • 的CSS Flexbox–完整的初学者指南

  • 弹性成长

    课程清单

    可以应用于弹性项目的另一个属性是“弹性增长”属性。此属性指定项目在伸缩容器内应占用的空间量(如有必要)。

    Flex增长因子始终与flex容器中其他项目的大小有关。

    弹性成长

    默认情况下,您可以看到弹性项目仅占用适合内容的空间。因此容器内有多余的空间。
    柔性显示器
    有时我们不希望有额外的空白,而是希望弹性项目增加以利用剩余的空间。
    默认情况下,所有flex项目的flex值都会增长0。因此,请为其中一项设置它,然后看看会发生什么。

    style.css
    ...
    .item-3 {
        background-color: #1C4C56;
        flex-grow: 1;
    }
    ...
    

    We have set the flex-grow: 1 to 3rd 项,因此第三项将利用多余的空格。

    注意:
    为了使所有项目相等,我们可以为每个flex-items添加相同的flex-grow值。

    弹性物品成长相等

    Flex扩展了额外的空间

    如果我们添加类似的flex-grow值,那么空间将平均分配两个包含flex-grow属性的项目。
    我们还可以通过增加整数值来为包含属性的项目提供不同的空间。

    style.css
    ...
    .item-6 {
        ...
        flex-grow: 1;
    }
    .item-7 {
        ...
        flex-grow: 3;
    }
    ...
    

    弹性商品成长不同
    现在item-7占用的空间是item-6的3倍。

    注意:
    该属性还接受十进制值,但请确保不要放置负值。

    演示版

    看笔
    弹性成长
    由rehmaanali(@geekstrick)
    密码笔.


    结论

    因此,该属性决定了项目应在flex容器内占用的可用空间量。
    弹性增长因子也相对于容器中的其他项目。默认情况下,值为0,表示该项目不应增长。
    即使容器中有其他空间,在所有伸缩项目上将值设置为1也会导致伸缩项目增长。

    弹性成长属性
    .
    .
  • 启用通知    不用了,谢谢