Flex布局–完美解决部分元素被挤压(flex-shrink属性)

17,361次阅读

共计 405 个字符，预计需要花费 2 分钟才能阅读完成。

解决方法很简单，就是使用 flex-shrink 属性；

flex-shrink 属性定义了项目的缩小比例，默认为 1
即如果空间不足，该项目将缩小，它还有另外一个值，就是 0

如果在子元素的 css 样式中添加 flex-shrink 属性，然后把值改为 0
flex-shrink：0 ，那么当前元素就不会被其他子元素挤压



  
        
        重新发送验证码

Flex 布局 -- 完美解决部分元素被挤压 (flex-shrink 属性) 因为 input 元素设置了 width: 100% 所以这个元素尽可能撑大，挤压到后面元素了

解决方法: 给元素设置 flex-shrink：0 即可

Flex 布局 -- 完美解决部分元素被挤压(flex-shrink 属性)

原文地址: Flex 布局 – 完美解决部分元素被挤压(flex-shrink 属性)

正文完

发表至：开发笔记

2024-09-30

转载说明：

1 本网站名称：优杰开发笔记
2 本站永久网址：https://yojack.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站所有内容均可转载及分享, 但请注明出处
6 我们始终尊重原创作者的版权，所有文章在发布时，均尽可能注明出处与作者。
7 站长邮箱：laylwenl@gmail.com

HTML 的＜a＞标签简单介绍

vue3 element-plus点击导航栏，el-main中的内容根据路由切换

基于PHP Mysql Html餐厅网站和预约订座系统设计与实现开题报告参考

html5 表格固定表头，表尾，及前几列

HTML中onblur事件的使用

自动轮播图片点击按钮及底部按钮切换图片