css中flex布局导致容器中图片被压缩问题

html-css015

css中flex布局导致容器中图片被压缩问题,第1张

图中：头像、“账号名称”，“具体名称内容”是一个容器内的三部分，给容器设置`display:flex`，时，如果“具体名称内容”字数过多，出现换行，会导致图片宽度被压缩，页面成为如下样子：

为了防止图片被压缩，可以给图片容器设置`flex-shrink: 0`，只有不为0的元素才会被压缩。

1、首先通过vertical-align:middle实现现图片与文字水平对齐，需要区分html是行内元素，还是块状元素，实现img、p及div水平居中对齐，则只需要在img的css中的vertical-align：middle；及将p和div（display：inline-block）转化为行内元素。

2、实现img、span水平居中对齐，由于这两者都是行内元素。

3、则只需要在img的css中的vertical-align：middle；span标签什么都不需要添加。

4、通过flex布局实现图片与文字水平对齐，只需要在父级元素中css添加。

5、子级元素则不需要像上面那样添加vertical-align：middle，这样就可以了。