CSS 弹性盒子 flex的三个属性:grow、shrink、basis
2021-04-20 04:28
标签:src size alt containe tle hal 概念 参考 code 首先介绍fl 如果图片A的 也许“扩大两倍”这个概念不便于理解,我们可以换一种说法。 首先要理解一个词“剩余空间”:具备flex环境的父容器(display:flex;)默认有一条从左往右 的主轴,而剩余空间就是父容器在主轴方向上还有多少可用空间。例如现在有一个父容器container宽度为500px, 而图A+图B为300px,则剩余空间为200px。此时,图片A的 则剩余空间200px将被分为1+2=3份,其中一份分给图片A,两份分给图片B,也就是上面所说的图片A比图片B多扩大两倍。 默认情况下,flex是不换行的,即使内容的宽度超过了父容器的宽度也不会,除非设置flex-wrap来换行。 如果 flex 容器太小,该项目会自动缩小。当容器的宽度小于里面所有项目的宽度,项目就会自动压缩。 如果图片A的 而实际的压缩率是多少呢?在实际内容宽度大于父容器的情况下, 剩余空间就自然地变为了负数,也就暂时不起作用。这里假设图片A 200px 图片B 200px,父容器300px。 设图片A B的压缩率是X1 X2,则有方程: X2 = 2 * X1 300 = 200*X1 + 200*X2,求得压缩率。 (如果你不想让内容被压缩,则可设置flex-shrink为0) 在这里,图片A的flex-basis为10em,图片B的flex-basis为20em: 上面几个 flex 属性有一个简写方式。 例如,图片A 图片B (flex 属性的默认设置是 当容器宽度小于150+150=300px时,会让图片A的缩小倍率为图片B的两倍(缩小得更快): 当容器宽度大于300px时,会让图片A的填充倍率为图片B的两倍(扩增得更快): 部分内容参考自:https://learn.freecodecamp.one/ CSS 弹性盒子 flex的三个属性:grow、shrink、basis 标签:src size alt containe tle hal 概念 参考 code 原文地址:https://www.cnblogs.com/abcdecsf/p/12258253.htmlflex-grow
ex-grow属性
,flex-grow
会在容器太大时对元素作出调整。flex-grow
属性的值为 1,图片B的flex-grow
为 2,那么 2 的会比 1 的扩大两倍:flex-grow
属性的值为 1,图片B的flex-grow
为 2,flex-shrink
flex-shrink
属性。flex-grow
会在容器太大时对元素作出调整。相应地,使用flex-shrink之后,flex-shrink
属性接受 number 类型的值。数值越大,与其他项目相比会被压缩得更厉害。例如,flex-shrink
为 1 ,图片B的flex-shrink
为 2,那么 2 的那个与 1 相比会受到 2 倍压缩:flex-basis
flex-basis
属性指定了项目在 CSS 进行flex-shrink
或flex-grow
调整前的初始大小。功能上等价于width,但优先级比width高。flex-basis
属性的单位与其他 size 属性一致(px
、em
、%
等)。如果值为auto
,项目的大小依赖于自身内容。 flex 短方法
flex-grow
、flex-shrink
和flex-basis
属性可以在flex
中一同设置。flex: 2 2 150px;
会把项目属性设为flex-grow: 2;
、flex-shrink: 2;
以及flex-basis: 150px;
flex: 1 1 150px;
会把项目属性设为flex-grow: 1;
、flex-shrink: 1;
以及flex-basis: 150px;
。flex: 0 1 auto;)
上一篇:JSOI2012~2013
文章标题:CSS 弹性盒子 flex的三个属性:grow、shrink、basis
文章链接:http://soscw.com/essay/76973.html