flex布局导致图片变形

现象

测试：手机端图片怎么变形成这样，如下图。

怎么可能，我在浏览器里打开都是好的

回顾flex布局

// 布局
render(){
    return <div className='box-wrap'> 
        <div className="box1">1</div>
        <div className="box2">2</div>
        <div className="box3">3</div>
        <div className="box4">4</div>
     </div>   
  }
// 样式 less
@list: #f66,#333,#ccc,#ff0;
each(@list,{
  .box@{index} {
    width:200px;
    background:@value;
    font-size:50px;
    text-align: center;
  }
})
.box-wrap{
  margin:40px;
  display: flex;
  width:402px;
}

上面代码定义了最四个子项，给父级设置了 flex 布局。这一切都是我们熟悉的最简单的 flex 布局方式。此时没有给子项设置高度，高度由子项自身高度撑起。

接下来我们给父级设置高度 400px看看会发生什么：

为了明显我给父级设置了1px的border。可以看到子项会自动撑满整个父级的高度。

再来给父类添加样 flex-wrap: wrap 看看

.box-wrap{
  margin:40px;
  display: flex;
  width:402px;
  border:1px solid #000;
  flex-wrap: wrap;
  height: 400px;
}

看到这里，你会发现，这跟我们最开始的图片被拉伸是不是异曲同工之秒。

如何解决图片拉伸

经过上面的测试，得知当我们不给子项设置高度时，子项会默认被拉伸。其实这个属性就是 align-items 来控制的,默认值为 stretch (拉伸) 。

.box-wrap {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

为了解决图片拉伸的问题，针对本文例子的情况

方法一：
可以将 align-items 设置为 非 stretch 的其他几个属性。并且不给父级设置固定高度，就可以得到我们预期的排布方式。点击此处查看 codepen
方法二：
父元素没有设置高度的情况下，可以设置图片height:100%
方法三：
如果子项都是行内元素，可以不采用flex布局，直接使用 text-align 实现居中对齐
方法四：
由于这个拉伸是由于垂直的交叉轴上都对齐方式 默认为 stretch 导致，那么可以将交叉轴设置为主轴就会不会有这个问题 flex-direction:column;