Closed xccjk closed 1 year ago
不知道大家在使用flex布局的时候是否遇到过下面的问题:固定宽高的父元素中,当子元素在设置固定宽或高并且子元素长或者宽超过父元素的宽高时,会出现子元素挤压变形的情况出现。
在flex布局下,子元素的默认放大(flex-grow)缩小(flex-shrink)比例为1,当子元素宽高和超过父元素时,子元素就会出现挤压变形的现象。
flex-grow
flex-shrink
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
当所有子元素宽度之和小于父元素的宽度时,子元素如何分配父元素的剩余空间
flex-grow属性取值是一个数值,默认值为0。当取值为0时,表示不索取父元素的剩余空间。当取值大于0时,表示索取父元素的剩余空间(即子元素放大)。取值越大,索取得越多
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
当所有子元素宽度之和大于父元素的宽度时,子元素如何缩小自己的宽度。
flex-shrink属性取值是一个数值,默认值为1。当取值为0时,表示子元素不缩小。当取值大于1时,表示子元素按一定的比例缩小。取值越大,缩小得越厉害
当所有子元素宽度之和小于弹性盒子的宽度时,flex-grow才会生效,而此时flex-shrink无效;只有当所有子元素宽度之和大于弹性盒子的宽度时,flex-shrink属性才会生效,而此时flex-grow无效。也就是说,flex-grow和flex-shrink是互斥的,不可能同时生效
flex-grow:0
flex-shrink:0
设置子元素flex-shrink为0不参与缩放操作
flex-shrink: 0
效果图:
demo示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex布局中子元素压缩问题</title> </head> <style> body { margin: 0; padding: 0; } .container { display: flex; flex-direction: column; align-items: center; padding: 16px; width: 375px; height: 100vh; box-sizing: border-box; } .item { display: flex; flex-direction: column; justify-content: space-between; margin-top: 16px; padding: 16px; width: 343px; height: 150px; flex-shrink: 0; border-radius: 8px; background-color: #f5f5f5; box-sizing: border-box; } .text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .footer { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .avatar { width: 32px; height: 32px; border-radius: 16px; overflow: hidden; background-color: #398def; } .btn { width: 80px; height: 32px; color: #fff; line-height: 32px; text-align: center; border-radius: 4px; background-color: #398def; } </style> <body> <div class="container"> <div class="item"> <div class="text">flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题</div> <div class="footer"> <div class="avatar"></div> <div class="btn">跳转</div> </div> </div> <div class="item"> <div class="text">flex布局中子元素压缩问题</div> <div class="footer"> <div class="avatar"></div> <div class="btn">跳转</div> </div> </div> <div class="item"> <div class="text">flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题</div> <div class="footer"> <div class="avatar"></div> <div class="btn">跳转</div> </div> </div> <div class="item"> <div class="text">flex布局中子元素压缩问题</div> <div class="footer"> <div class="avatar"></div> <div class="btn">跳转</div> </div> </div> <div class="item"> <div class="text">flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题</div> <div class="footer"> <div class="avatar"></div> <div class="btn">跳转</div> </div> </div> <div class="item"> <div class="text">flex布局中子元素压缩问题</div> <div class="footer"> <div class="avatar"></div> <div class="btn">跳转</div> </div> </div> <div class="item"> <div class="text">flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题flex布局中子元素压缩问题</div> <div class="footer"> <div class="avatar"></div> <div class="btn">跳转</div> </div> </div> <div class="item"> <div class="text">flex布局中子元素压缩问题</div> <div class="footer"> <div class="avatar"></div> <div class="btn">跳转</div> </div> </div> </div> </body> </html>
现象
不知道大家在使用flex布局的时候是否遇到过下面的问题:固定宽高的父元素中,当子元素在设置固定宽或高并且子元素长或者宽超过父元素的宽高时,会出现子元素挤压变形的情况出现。
问题原因
在flex布局下,子元素的默认放大(
flex-grow
)缩小(flex-shrink
)比例为1,当子元素宽高和超过父元素时,子元素就会出现挤压变形的现象。放大比例:flex-grow
flex-grow
属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大当所有子元素宽度之和小于父元素的宽度时,子元素如何分配父元素的剩余空间
flex-grow属性取值是一个数值,默认值为0。当取值为0时,表示不索取父元素的剩余空间。当取值大于0时,表示索取父元素的剩余空间(即子元素放大)。取值越大,索取得越多
缩小比例:flex-shrink
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小当所有子元素宽度之和大于父元素的宽度时,子元素如何缩小自己的宽度。
flex-shrink
属性取值是一个数值,默认值为1。当取值为0时,表示子元素不缩小。当取值大于1时,表示子元素按一定的比例缩小。取值越大,缩小得越厉害当所有子元素宽度之和小于弹性盒子的宽度时,
flex-grow
才会生效,而此时flex-shrink
无效;只有当所有子元素宽度之和大于弹性盒子的宽度时,flex-shrink
属性才会生效,而此时flex-grow
无效。也就是说,flex-grow
和flex-shrink
是互斥的,不可能同时生效flex-grow:0
或者flex-shrink:0
;的子元素,宽度为原来定义的宽度,并且不会参与划分flex-grow
的默认值为0,而flex-shrink
的默认值为1解决方式
设置子元素
flex-shrink
为0不参与缩放操作效果图:
demo示例: