记踩坑，flex布局引起的图片变形
2019-04-01 本文已影响546人
临安linan
flex布局作为新时代前端的利器，可以说是必会了，帮我们解决了很多之前需要复杂代码才能实现的效果，最近flex 用的也挺多的，分享一下一个flex布局的踩坑
（以下代码在JS Bin测试完成，链接：http://js.jirengu.com/gokol/1/edit?html,css,js）
image.png
image.png
需求是：将三张 400 x 300 的图片水平放置，将图片宽度改为200px，并等比缩小，听起来很简单是吧。
可以用float，只改变图片宽高之一，然后清除浮动就好了。
如果用flex，好像更简单，默认就放在一行了。
来看看效果：
image.png
为什么图片被拉伸了？只缩小宽度，图片不是等比缩放吗？
原因是：flex默认在交叉轴方向，即align-items默认是sketch的，也就是内部的元素默认是占满容器的高度的，
（参考阮一峰老师的flex教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）
image.png
可以理解为：flex的align-items阻止了图片的等比缩放，将原有高度作为容器高度将容器撑开了！
只要将align-items设为上述其余四个值的任意值就ok了
image.png
