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

记录自己遇到的坑

项目： 指 flex 布局的子元素

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

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

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

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

后记

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