CSS3 flex 布局 图片撑大 父级元素被放大 解决办法


记录自己遇到的坑

项目: 指 flex 布局的子元素

当在flex布局情况下,当内容超过项目大小时, 项目会被内容撑开,这种情况下,容易导致页面布局错乱。

解决办法: 给项目设定一个固定1个像素大小的宽带或者高度(取决与flex-direction的方向,横轴设定width,纵轴设定height),并且设定 项目 flex:1

这样盒子就不会被撑开,但是内容会溢出,如果想忽略掉溢出内容,则给 项目 盒子再添加一个属性: overflow: hidden;

还有一点,上层的每一个盒子都需要有高度,不然还是会被撑开

后记

先记录一下, 有时间再整理出教程


免责声明!

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



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