flex中的flex-grow、flex-shrink、flex-basis及缩写属性flex的使用场景

至尊绝伦

已于 2022-04-25 21:20:58 修改

阅读量1.5w

点赞数 24

分类专栏：笔记 css flex布局文章标签： html css

于 2022-04-25 12:18:16 首次发布

本文链接：https://blog.csdn.net/m0_51636525/article/details/124401567

版权

笔记同时被 3 个专栏收录

55 篇文章

订阅专栏

css

4 篇文章

订阅专栏

flex布局

1 篇文章

订阅专栏

本文详细介绍了Flex布局中的flex-grow、flex-shrink和flex-basis属性，解释了它们如何影响Flex项在容器中的伸缩行为。flex-grow决定元素如何拉伸以填充剩余空间，flex-shrink则决定元素如何收缩以适应容器。通过实例展示了不同设置下元素的宽度变化，帮助理解这三个属性的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.【flex-grow】决定了flex items 如何扩展拉伸

总结：

一个元素不设置或者flex-grow设置为0，默认是元素的宽度；
如果给一个或多个元素设置了非负的flex-grow值，父元素剩余的宽度（如果有）重新分配宽度，flex-grow的值代表分配到的宽度比例。

有点难理解，下面有例子解释说明。

1.1.【flex-grow】默认样式

可以设置任意非负数字（正小数、正整数、0），默认是0
当flex-container在main axis（主轴）方向上有剩余size（空间）时，flex-grow属性才增加宽度

三个宽度120px（3*120px=360px）的子元素放在一个宽度420px的父级元素中，父级元素使用flex布局

<div class="container">
    <div class="item item1">120px</div>
    <div class="item item2">120px</div>
    <div class="item item3">120px</div>
</div>

.container {
            display: flex;
            width: 420px;
            height: 200px;
        }    
.item {
            width: 120px;
            height: 120px;
        }

三个item的flex-grow默认都是0，所以不会占用剩下的空间，还有60px剩余，如图1-1所示。

1.2.【flex-grow】只给一个子元素添加flex-grow 填满父元素宽度

只给一个子元素设置flex-grow值

设置了正值flex-grow（可以是flex-grow:1、flex-grow:2）的那个子元素，会占满父元素剩余的空间。
其他子元素为默认值0，占原来自己的宽度

只要子元素添加了flex-grow正值，就重新分配父元素剩余空间的宽度，如图1-2、1-3所示。

1.3.【flex-grow】给多个子元素添加flex-grow 填满父元素宽度

给多个子元素设置flex-grow值

给设置了正值的多个子元素分配宽度
按照flex-grow的值按比例分配父元素剩余宽度

可以看到浏览器将父元素剩余的宽度按比例分配给了item2和item3

效果如图1-4所示

给每个子元素都添加flex-grow属性，只要是添加了flex-grow的都会按比例分配，效果如图1-5所示。父元素剩余的宽度是60px，所以给第一个子元素分配了30px、第二个子元素分配了20px、第三个子元素分配了10px。

2.【flex-shrink】决定了flex items 如何收缩

总结：

一个元素不设置或者flex-shrink设置为1，默认会压缩元素的宽度；
如果给一个或多个元素设置了0的flex-shrink值，那些元素会按原宽度显示，宽度可以超过父元素。

下面有例子解释说明。

2.1.【flex-shrink】默认样式

可以设置任意非负数字（正小数、正整数、0），默认值是1
当flex-items在main axis方向超过了flex container的size，flex-shrink属性才有效。item总共的宽度比容器大

三个宽度120px（3*120px=360px）的子元素放在一个宽度300px的父级元素中，父级元素使用flex布局

<div class="container">
    <div class="item item1">120px</div>
    <div class="item item2">120px</div>
    <div class="item item3">120px</div>
</div>

虽然3个宽度为120px的子元素超过了父元素300px，但是默认会缩小每个子元素的值以放进三个子元素，如图2-1所示。

.container {
            display: flex;
            width: 300px;
            height: 200px;
        }
        
        .item {
            width: 120px;
            height: 120px;
        }

2.2.【flex-shrink】给一个或多个子元素设置flex-shrink:0

给一个子元素设置flex-shrink:0值，这个元素就会按原宽度显示，而其他元素就会被挤压

当设置flex-shrink:0的元素对应的宽度大于父元素的时候，会超出父元素宽度，如图2-3所示

3.【flex-basis】决定flex items的基本大小

应用的场景比较少，而且平常也很少去主动设置。默认值是auto。flex-basis用来设置flex items在main axis方向上的base size，与width有点类似，下面与其他大小设置的优先级进行比较

决定 flex items 最终 base size 的因素，从优先级高到低

max-width\max-height\min-width\min-height
flex-basis
width\height
内容本身的 size

4.【flex】缩写属性

4.1.【flex】单值语法

一个无单位数(<number>): 它会被当作flex:<number> 1 0 的值。flex-shrink的值被假定为1，即可以伸缩。flex-basis的值被假定为0，默认是没有宽度的。
一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。
关键字none，auto或initial.

4.1.1.【flex】无单位数

下面的内容不好理解，可以只记住结论：

在给一个或多个子元素设置了flex:<number>后，会将那个子元素或者那些子元素的宽度+父元素剩余的宽度按比例重新分配。

举例说明1：一个item设置flex值

三个宽度120px（3*120px=360px）的子元素放在一个宽度420px的父级元素中，父级元素使用flex布局，如图4-1所示。

<div class="container">
        <div class="item item1">120px</div>
        <div class="item item2">120px </div>
        <div class="item item3">120px </div>
</div>

.container {
            display: flex;
            width: 420px;
            height: 200px;
       
        }
        
        .item {
            width: 120px;
            height: 120px;
        }

给item3设置了flex:1后，item3的宽度加上黄色部分（父元素剩余的宽度）会重新分配宽度。如图4-2所示。

因为flex:1;会被当做flex:1 1 0;

flex-basis暂定为0，没有宽度，flex-grow又设置为1，就占用了全部的宽度。如图4-3所示

举例说明2：多个item设置flex值

给item1设置flex:1; 给item2设置flex:2 ; 给item3设置flex:3

flex:flex-grow flex-shrink flex-basis;

给元素设置flex单值，flex-basis为0，没有宽度。在本例子中设置了三个子元素，所以整个父元素都没有宽度。又设定了flex-grow，子元素按比例分配剩下的宽度。