Flex 盒模型对于移动端适配非常简便,但是也会出现很多问题
今天遇见了一个小问题,使用Flex布局时,图片被压缩变形了,以为是img的宽度没有给够,于是给img加100%的宽度(img外面套了一个盒子),发现无效.
于是去MDN查看Flex文档,解释:在 flex 布局中，当有一个元素宽度过长时，另一个元素宽度会被压缩.
图片中右边元素的宽度很大,导致左边图片被压缩,此时,我们向左边元素的父盒子加一个flex-shrink: 0;此时,被压缩的图片就会恢复正常.
当然还有种方法可以解决,就是给右边盒子一个最小宽度min-width,使右边盒子不会达到父元素宽度,因此就不会发生另一个元素被压缩的情况,但是,不推荐使用这种方法,仅供参考.
贴一下代码
HTML部分:
style部分:
