父元素flex之后，子元素高度自适应问题

在我们做排版时候，特别是在做手机端自适应的情况，例如有3张图片，各分等比例排在一行，代码如下：

<div class="img">

   <img src="images/1.jpg"/>

   <img src="images/1.jpg"/>

   <img src="images/1.jpg"/>

</div>

当然你的CSS有其它写法可以达到平分的功能，我这里指的是父元素设置flex的情况，CSS代码如下

.img{

  width:100%;

  display:-webkit-box;

  display:-webkit-flex;

  display:-ms-flexbox;

  display:flex;

  -webkit-box-pack:justify;

  -webkit-justify-content:space-between;

  -ms-flex-pack:justify;

   justify-content:space-between;

}

.img img{

  width:33%;

  height:auto;

}

这种版本的情况，如果你的宽度变化的情况，图片的宽度会跟着变化，但高度的auto你会发现不起作用

OK这种情况你可只须要多添加一个align-self：flex-start;即可

.img img{

  width:33%;

  height:auto;

  align-self: flex-start;

}

当然你也可以给img各嵌套容器来实现

tpframe原创文章，转载请注明出处