原文链接:https://www.jianshu.com/p/9edf7eae3bf8

flex布局作为新时代前端的利器,可以说是必会了,帮我们解决了很多之前需要复杂代码才能实现的效果,最近flex 用的也挺多的,分享一下一个flex布局的踩坑
(以下代码在JS Bin测试完成,链接:http://js.jirengu.com/gokol/1/edit?html,css,js

image.png



需求是:将三张 400 x 300 的图片水平放置,将图片宽度改为200px,并等比缩小,听起来很简单是吧。
可以用float,只改变图片宽高之一,然后清除浮动就好了。
如果用flex,好像更简单,默认就放在一行了。

来看看效果:


为什么图片被拉伸了?只缩小宽度,图片不是等比缩放吗?
原因是:flex默认在交叉轴方向,即align-items默认是sketch的,也就是内部的元素默认是占满容器的高度的,
(参考阮一峰老师的flex教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

image.png


可以理解为:flex的align-items阻止了图片的等比缩放,将原有高度作为容器高度将容器撑开了!
只要将align-items设为上述其余四个值的任意值就ok了