详解 flex:1 到底是什么

最新推荐文章于 2025-11-03 17:42:45 发布

原创最新推荐文章于 2025-11-03 17:42:45 发布 · 7.8k 阅读

38 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

在这里插入图片描述

前言

flex布局在前端开发中是必不可少的，它打破了原来块级盒子自上向下排列的规则，使得开发者们可以更自由的排列盒子。flex:1相信大家在开发当中都没少写，但是它具体是什么意思相信很多人还不清楚，下面我们用通俗的话介绍下flex:1代表什么！！！

一、flex：1由哪些属性组合而成？

flex-grow : 1
flex-shrink : 1
flex-basis : auto

flex-grow：简单来说就是对父元素剩余空间的分配规则（默认值：0）

举例：父元素宽600px，子元素A宽100px，子元素B宽200px，父元素的剩余空间为300px
在这里插入图片描述
子元素A设置 flex-grow：1
子元素B设置 flex-grow：2
如下图:
子元素A的宽度为： (原先的宽) + (父元素剩余宽度) * (A元素占比 / A元素占比 + B元素占比)
100 + 300 * (1 / 1 + 2) = 200
子元素B的宽度为： (原先的宽) + (父元素剩余宽度) * (B元素占比 / A元素占比 + B元素占比)
200 + 300 * (2 / 1 + 2) = 400
在这里插入图片描述

flex-shrink：仅当子元素相加宽度之和大于弹性盒子的时候发生的收缩比（默认值：1）

举例：父元素宽600px，子元素A宽400px，子元素B宽600px，超出父元素宽度400px
如下图:
子元素A的宽度为： (原先的宽) - (超出父元素的宽度) * (A元素宽度 / A元素宽度 + B元素宽度)
400 - 400 * (400 / 400 + 600) = 240
子元素B的宽度为： (原先的宽) - (超出父元素的宽度) * (B元素宽度 / A元素宽度 + B元素宽度)
600 - 400 * (400 / 400 + 600) = 360
在这里插入图片描述