写这篇文章的缘由
随着浏览器的不断升级换代，虽然flex布局已经在开发中很常用了，我也自以为用得很熟练了，但是最近一个关于图片的宽高问题却让我被好好上了一课。详细内容是这样的：做一个左侧是图片，右侧是文字的左右结构，不同于看报或者文章中的文字包围文字，而是标准的左右结构，于是我很自然的选择了flex布局。首先父容器display: flex，里面包含左侧图片和右侧文字，而问题就出在了左侧的图片上，由于设计上图片所占宽高是固定的，而实际图片是用户上传保存至后台再由前端去取的，所以我设置了图片的宽高完全和ui稿的尺寸保持一致，结果每当网页第一次加载时，图片比例都会失调（高度和我设置的值一致，宽度完全放飞自我，见下图），每次要刷新之后才变为“正常”，甚至我在宽高上加上!important仍然如此。直到此刻我写下这篇文章时也搞明白为什么刷新之后图片会变为正常，我猜测或许浏览器在缓存图片的时候会把网页中图片的默认样式也缓存下来。而当时由于不知道问题在哪，一时半会也无从下手，最后和前同事讨论了下，他一听我用了flex布局马上告诉我要给图片设置flex-shrink为0。结果图片立马乖乖的按我的方式展现，仿佛有一种立正站好的感觉。。。
问题再现.png
那么，话说回来，我之前用了flex也有几年了，居然都没用到flex-shrink这个属性，也没碰到过这么个问题，惭愧。通过查阅资料发现flex-shrink属性指定了 flex 元素的收缩规则，flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。这个属性的默认值是1，值越大代表收缩程度越大，设置成0则不会收缩。
写一个简单的例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.block {
display: flex;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.img-item {
width: 50px !important;
height: 80px !important;
/* flex-shrink: 0; */
}
.right-part {
margin-left: 20px;
}
.right-word {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="block">
<img class="img-item" src="http://xxxx.jpg" alt="">
<div class="right-part">
<p>姓名</p>
<p class="right-word">政治面貌</p>
<p class="right-word">我是描述</p>
</div>
</div>
</body>
</html>
当文字内容不多的时候图片还是可以正常展示的：
演示1.png
一旦文字换行了，就出现了上文flex-shrink定义中的默认宽度之和大于容器宽度，这时候内容就会发生收缩
演示2.png
而设置了
flex-shrink:0之后，图片就恢复正常了，这时候也可以删掉!important了
顺便再看看合写的flex属性
flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。
在我以前的开发当中倒是用过flex属性，而且就写一个值，一个值如果是无单位的数字则代表的是flex-grow的值，如果是一个宽度值则代表flex-basis的值。flex-grow定义了拉伸因子（默认是0），flex-basis指定了 flex 元素在主轴方向上的初始大小（默认是auto）。所以我以前所写的只有一个数字的flex值代表了flex元素的拉伸大小，这确实在调整局部的flex元素宽度上有点用处。
网友评论