深入理解 flex-grow、flex-shrink、flex-basis

最新推荐文章于 2025-03-22 20:24:59 发布

前端贾公子

最新推荐文章于 2025-03-22 20:24:59 发布

阅读量3.1k

点赞数 27

分类专栏：前端技能文章标签：前端

本文链接：https://blog.csdn.net/qq_63358859/article/details/142443293

版权

1. Flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为 0 1 auto

任何一个容器都可以用 Flex 进行布局(如果不会 flex 布局的可见阮老师的 Flex 布局教程)，而且 Flex 是发生在父容器和子容器之间的布局关系的，那么父容器与子容器的关系是怎么样子的，又是怎么计算子容器所占用的空间的呢，怎么进行弹性布局的呢？

欲要解决上面的问题，首先得了解 flex-grow 和 flex-shrink 是怎么计算的？flex-basis 和 width 又有什么关系和区别？

接下来，我们先提出两个概念：剩余空间和溢出空间，具体是什么意思我们后面慢慢解释。

2. flex-grow

flex-grow属性在MDN上的定义是：

定义弹性盒子项（flex-item）的拉伸因子，默认值0”

传统的布局是子容器在父容器中从左到右进行布局，应用 flex 进行布局，那么父容器一定设置 display: flex，子容器要“占有”并且“瓜分”父容器的空间，如何占有、瓜分的策略就是弹性布局的策略。这里就要解释到“剩余空间”的概念：

子容器在父容器的“主轴”上还有多少空间可以“瓜分”，这个可以被“瓜分”的空间就叫做剩余空间。

文字总是很抽象，举个例子就能理解剩余空间了，现在有如下的代码：

HTML 代码：

<body>
    <div class="container">
        <div class="item a">
            <p>A</p>
            <p> width:100</p>
            <p>flex-grow:1</p>
        </div>
        <div class="item b">
            <p>B</p>
            <p> width:150</p>
            <p>flex-grow:2</p>
        </div>
        <div class="item c">
            <p>C</p>
            <p> width:100</p>
            <p>flex-grow:3</p>
        </div>
    </div>
</body>

CSS代码：

    <style>
        .container {
            margin: 10px;
            display: flex;
            width: 500px;
            height: 200px;
            background-color: #eee;
            color: #666;
            text-align: center;
        }

        .item {
            height: 100px;
        }

        .item p {
            margin: 0;
        }

        .a {
            width: 100px;
            background-color: #ff4466;
        }

        .b {
            width: 150px;
            background-color: #42b983;
        }

        .c {
            width: 100px;
            background-color: #61dafb;
        }
    </style>

展示的效果如下(最后那个框是截图的时候的标注，不是展示出来的效果)：