flex-shrink 解决实际问题（flex-shrink:0避免图片被压扁）

flex-shrink

flex-shrink 属性指定了 flex 元素的收缩规则，默认值是1。在flex 元素的默认宽度之和大于容器的宽度时候，元素会发生收缩，其收缩的大小的依据是 flex-shrink 值。

示例1

<div style="display:flex; align-items: center; margin:100px;"><div style="width: 100px; height:30px; background: gray; "></div><div style="width: 100px; height:30px; background: pink; "></div><div style="width: 300px; height:30px; background: rgb(182, 182, 78); "></div><div style="width: 300px; height:30px; background: rgb(165, 96, 165); "></div>
</div>

子元素的宽度之和为 100+100+300+300=800px，每个子的默认flex-shrink值是1。

当父容器被压缩到小于800px的时候，比如压缩到560px时，里面的子元素也会被相应地压缩。各个子元素被压缩掉多少宽度呢？

4个子div的宽度比是 1:1:3:3，4个子元素的默认flex-shrink值都是1，所以flex-shrink比例：1:1:1:1。

(1:1:3:3) x (1:1:1:1) = 1:1:3:3，得每个子元素的被压缩掉的那部分宽度的比例是 1:1:3:3 。

父容器从800px收缩到560px，即总宽度被压缩掉了240px，则每个子元素相应被压缩掉
30px、30px、90px、90px。所以每个子元素的剩余宽度是：

示例2

当不想某个子元素在父容器变窄时被压缩，可以使用 flex-shrink:0 ，比如

4个子div的宽度比是 1:1:3:3，4个子元素的flex-shrink值的比例是：1:1:0:1。

(1:1:3:3) x (1:1:0:1) = 1:1:3:3，得每个子元素的被压缩掉的那部分宽度的比例是 1:1:0:3 。

父容器从800px收缩到560px，即总宽度被压缩掉了240px，则每个子元素相应被压缩掉
48px、48px、0px、144px。所以每个子元素的剩余宽度是：

最后注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

flex-shrink 解决实际问题（flex-shrink:0避免图片被压扁）相关推荐

html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
oracle 12c rac flex,ORACLE 12CR2 RAC Flex集群与传统标准集群的区别与设置
ORACLE 12CR2 RAC Flex集群与传统标准集群的区别与设置本文主要讲述安装配置ORACLE 12C R2 RAC时,需要注意的方面:即是Flex集群还是传统的标准集群,默认安装的情况下 ...
html flex 上中下布局,flex 布局
FlexiableBox即是弹性盒,用来进行弹性布局,一般跟rem(rem伸缩布局(转))连起来用比较方便,flexbox负责处理页面布局,然后rem处理一些flex顾及不到的地方(rem伸缩布局主要 ...
ArcGIS Flex API 中的 Flex 技术（一）--事件
作者:Flyingis 本文严禁用于商业目的,如需转载请注明作者及原文链接,其他疑问请联系:dev.vip#gmail.com 在ArcGIS Flex API中探索Flex使用是一种不错的学习方法, ...
JavaScript 5/30：Flex Panel Gallery即FLEX布局的图片库
JavaScript30 为Wes Bos推出的一项为期30天的挑战,旨在帮助人们用纯JavaScript来实现效果,初学者若想在JS方面快速精进,不妨一试.本题为第五题. 实现效果点击任意一张图片 ...
步步为营！高手教你如何有效使用深度学习解决实际问题
来自法国 Capgemini Invent 公司的高级数据科学家 Ahmed BESBES 三个月前参加了一个其公司内部的比赛:使用机器学习方法帮助海洋科学家更好的识别鲸鱼,根据鲸尾页突的外观作为主要 ...
c++获取输入数字的位数/获取位数并且将其存入数组中/获取位数存入数组并且利用它解决实际问题
1.仅仅获取数字的位数: int checkNumber(int num){int weishu = 0;for (int i = 1, num1 = num, shuzu = 0; num / i; ...
flex连接mysql_java与flex结合做的登陆（连接数据库）
在做项目的时候用的是php+flex,自己闲的没事用java+flex写的小例子,希望对java程序员学习flex有所帮助吧.java与flex结合有几种方式: [1]:通过flex-plugin的一 ...
flex布局HTML实例,Flex常见布局实例
如果对flex不是很熟悉的同学,可以看一下我的另一篇文章Flex 布局 1.网格布局 1.1.基本网格布局最简单的网格布局,就是平均分布. HTML代码如下. 1/2 1/2 1/3 1/3 1/3 ...

flex-shrink 解决实际问题（flex-shrink:0避免图片被压扁）

flex-shrink

示例1

示例2

flex-shrink 解决实际问题（flex-shrink:0避免图片被压扁）相关推荐

最新文章

热门文章