flex布局中子元素宽度失效的问题


在弹性布局中,有一种情况是左边设置一个子元素固定宽度,右边设置自适应占满剩余空间,但有时候会发现左边固定元素的宽度竟然失效了,被右边的元素挤占空间了,所以仔细查看flex属性的特点后,发现少设置了一些属性样式。  

父元素设置完 display:flex 属性后; 

子元素设置固定宽度: 

width:50px;
height:50px; 复制代码

这里加上另外一个属性可防止宽度变化,就是

flex-grow: 此属性为是否自动增长空间,
flex-shrink;此属性为是否自动缩小空间,
默认值都是1,即自动增长/缩小,
设置为0时,不会自动增长/缩小

flex-grow:0;

flex-shrink:0;

防止固定大小的元素宽度发生变化

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM