CSS 弹性盒子 flex的三个属性:grow、shrink、basis

搬运自博客园,写于 2020 年

flex-grow

首先介绍flex-grow属性flex-grow会在容器太大时(图片A、B的宽度和 < 父容器宽度)对元素作出调整。

如果图片A的flex-grow属性的值为 1,图片B的flex-grow为 2,那么 2 的会比 1 的扩大两倍:

也许"扩大两倍"这个概念不便于理解,我们可以换一种说法。

首先要理解一个词"剩余空间":具备flex环境的父容器(display:flex;)默认有一条从左往右

的主轴,而剩余空间就是父容器在主轴方向上还有多少可用空间。例如现在有一个父容器container宽度为500px,

而图A+图B为300px,则剩余空间为200px。此时,图片A的flex-grow属性的值为 1,图片B的flex-grow为 2,

则剩余空间200px将被分为1+2=3份,其中一份分给图片A,两份分给图片B,也就是上面所说的图片A比图片B多扩大两倍。

flex-shrink

默认情况下,flex是不换行的,即使内容的宽度超过了父容器的宽度也不会,除非设置flex-wrap来换行。

flex-shrink属性。flex-grow会在容器太大时对元素作出调整。相应地,使用flex-shrink之后,

如果 flex 容器太小,该项目会自动缩小。当容器的宽度小于里面所有项目的宽度,项目就会自动压缩。

flex-shrink属性接受 number 类型的值。数值越大,与其他项目相比会被压缩得更厉害。例如,

如果图片A的flex-shrink为 1 ,图片B的flex-shrink为 2,那么 2 的那个与 1 相比会受到 2 倍压缩:

而实际的压缩率是多少呢?在实际内容宽度大于父容器的情况下,

剩余空间就自然地变为了负数,也就暂时不起作用。这里假设图片A 200px 图片B 200px,父容器300px。

设图片A B的压缩率是X1 X2,则有方程:

X2 = 2 * X1

300 = 200*X1 + 200*X2,求得压缩率。

(如果你不想让内容被压缩,则可设置flex-shrink为0)

flex-basis

flex-basis属性指定了项目在 CSS 进行flex-shrinkflex-grow调整前的初始大小。功能上等价于width,但优先级比width高。

flex-basis属性的单位与其他 size 属性一致(pxem%等)。如果值为auto,项目的大小依赖于自身内容。

在这里,图片A的flex-basis为10em,图片B的flex-basis为20em:

flex 短方法

上面几个 flex 属性有一个简写方式。flex-growflex-shrinkflex-basis属性可以在flex中一同设置。

例如,图片A flex: 2 2 150px;会把项目属性设为flex-grow: 2;flex-shrink: 2;以及flex-basis: 150px;

图片B flex: 1 1 150px;会把项目属性设为flex-grow: 1;flex-shrink: 1;以及flex-basis: 150px;

(flex 属性的默认设置是flex: 0 1 auto;)

当容器宽度小于150+150=300px时,会让图片A的缩小倍率为图片B的两倍(缩小得更快):

当容器宽度大于300px时,会让图片A的填充倍率为图片B的两倍(扩增得更快):


部分内容参考自:learn.freecodecamp.one/

相关推荐
杨进军2 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW17 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字23 分钟前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im1 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript