flex布局中理解flex-grow、flex-shrink、flex-basis属性

宁然也

已于 2023-06-06 19:21:19 修改

阅读量1k

点赞数 3

分类专栏：前端语言文章标签： css css3 前端

于 2023-05-08 15:29:38 首次发布

本文链接：https://blog.csdn.net/weixin_42382758/article/details/130555869

版权

前端语言专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了Flex布局中的三个关键属性：flex-basis用于设定元素的基础尺寸，flex-grow定义了元素如何分配剩余空间，flex-shrink则说明了元素如何缩小以适应容器。通过实例展示了这三个属性如何影响子元素在容器中的布局和尺寸变化。

摘要由CSDN通过智能技术生成

参考博客：
深入理解flex布局的flex-grow、flex-shrink、flex-basis

flex-basis属性

flex-basis设置子项目占据的空间大小，如果指定flex-basis的值，则子项目会占用所设置的值。如果没有指定或者设置为auto，子项目占据的大小为width height的值。

<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">222</div>
        <div class="item">333</div>
    </div>
</body>
<script>
   
</script>
<style>
    .box {
        width: 400px;
        height: 50px;
        display: flex;
        background-color: black;
    }
    .item{
        height: 50px;
    }
    .item:nth-child(1) {
        background-color: red;
    }
    .item:nth-child(2) {
        width: 70px;
        height: 30px;
        flex-basis: auto;
        background-color: gray;
    }
    .item:nth-child(3) {
        width: 50px;
        flex-basis: 100px ;
        background-color: yellow;
    }
</style>

在这里插入图片描述

item1 没有指定 flex-basis，默认宽度为项目本身的width
item2 指定 flex-basis: auto; 同时指定width height 则占据的大小为width和height的大小，即 width: 70px; height: 30px;
item3 指定了flex-basis：100px 会覆盖width宽度。所以子项目占据的宽度就是100px;

flex-grow

felx-grow瓜分剩余的空间

<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">222</div>
        <div class="item">333</div>
    </div>
</body>
<script>
   
</script>
<style>
    .box {
        width: 400px;
        height: 50px;
        display: flex;
        background-color: black;
    }
    .item{
        height: 50px;
    }
    .item:nth-child(1) {
        width: 50px;
        background-color: red;
    }
    .item:nth-child(2) {
        width: 70px;
        flex-basis: auto;
        flex-grow: 2;
        background-color: gray;
    }
    .item:nth-child(3) {
        width: 50px;
        flex-basis: 100px ;
        flex-grow: 1;
        background-color: yellow;
    }
</style>

在这里插入图片描述

项目	没瓜分前width	放大的份额	瓜分的width	总计width
item1	50px	0	(400-50-70-100)/3 * 0	50
item2	70px	2	(400-50-70-100)/3 * 2=120px	70+120
item3	100px	1	(400-50-70-100)/3 * 1=60px	100+60

容器的宽度为400px, 子项1的占用的基础空间(flex-basis)为50px，子项2占用的基础空间是70px，子项3占用基础空间是100px，剩余空间为 400-50-70-100 = 180px。其中子项1的flex-grow: 0(未设置默认为0)，子项2flex-grow: 2，子项3flex-grow: 1，剩余空间分成3份，子项2占2份(120px)，子项3占1份(60px)。所以子项1真实的占用空间为: 50+0 = 50px，子项2真实的占用空间为: 70+120 = 190px，子项3真实的占用空间为: 100+60 = 160px。

flex-shrink

用来“吸收”超出的空间

<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">222</div>
        <div class="item">333</div>
    </div>
</body>
<script>
   
</script>
<style>
    .box {
        width: 400px;
        height: 50px;
        display: flex;
        background-color: black;
    }
    .item{
        height: 50px;
    }
    .item:nth-child(1) {
        width: 250px;
        background-color: red;
    }
    .item:nth-child(2) {
        width: 150px;
        flex-basis: auto;
        flex-shrink: 2;
        background-color: gray;
    }
    .item:nth-child(3) {
        width: 50px;
        flex-basis: 100px ;
        flex-shrink: 2;
        background-color: yellow;
    }
</style>

在这里插入图片描述
容器宽度400px, 子项目1占用的基准空间(width)为250px，子项目2占用基准空间(width)为150px, 子项目3占用基准空间(flex-basis)为100px, 总基准空间250+150+100=500px > 400px, 多出的100px需要子项目根据flex-shrink进行吸收。
子项目1的flex-shrink=1(未设置默认1); 子项目2 flex-shrink=2; 子项目3 flex-shrink=2
因此子项目1需要需要吸收的空间为(2501)/(2501 + 1502 + 1002)*100=33.33px, 子项目1真实空间250-33.33=216.67
子项目2需要吸收空间： (150*2)/(250*1 + 150*2 + 100*2)*100=40px，子项目2真实空间 150-40=110px
子项目3需要吸收空间(100*2)/(250*1 + 150*2 + 100*2)*100=26.67, 真实的空间为100-26.67=73.33px

宁然也

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
flex布局中理解flex-grow、flex-shrink、flex-basis属性

其中子项1的flex-grow: 0(未设置默认为0)，子项2flex-grow: 2，子项3flex-grow: 1，剩余空间分成3份，子项2占2份(120px)，子项3占1份(60px)。容器宽度400px, 子项目1占用的基准空间(width)为250px，子项目2占用基准空间(width)为150px, 子项目3占用基准空间(flex-basis)为100px, 总基准空间250+150+100=500px > 400px, 多出的100px需要子项目根据flex-shrink进行吸收。
复制链接

扫一扫

专栏目录