今天在玩flex布局的过程中发现了一些非常好玩的东西，现在分享给大家。
flex布局与与图像尺寸
首先看如下html结构和css结构，引用图3这张图片，大家猜猜img的高会是多少？
图1 html结构
图2 css结构
图3 原图大小
正常情况下图片的高度会按照原图片宽高比，显示图像的高大概会为137px这样，但是其实图像大小为原大小390px，如图4所示，flex布局下的图像会自动填充自己的原尺寸，不会按照原比例计算后显示相应的高度。
图4 图像显示后大小
注意：该效果只有img是flex布局元素的直接子元素才会有效果。
flex布局下的margin
上图中img如果给设定margin-left：auto，猜会有怎么样的效果？正常块级元素设置该值不会有什么特殊效果，但是如果是flex下的直接子元素，会是图5的效果：
图5 flex布局下图片设置margin-left:auto后的效果
margin-left会自动分配掉多余的空间。下边给大家讲一个很有意思的东西，你们猜如果给图片设置margin:auto会是什么效果？没错，你猜对了，图片会自动分配空间上下左右都居中，如下图的效果：
图6 flex布局下图片设置margin:auto后的效果
并且图片会变小，图片不在是原图像大小，margin会分配掉多余的上下的多余空间，从而图像会变小，因此我们以后多了一个可以让图像上下左右都居中的方法，当然前提是图片要有多余的空间可以分配。
图7 设置margin:auto后图片的尺寸大小
网友评论