flex 指定了宽度，依然会被压缩宽度

[lovelmh13]

为指定宽度的元素设置 flex: none

flex: none 是 flex: 0 0 auto 的简写。

0: flex-grow: 0 表示放大比例为 0，有剩余空间也不放大

0: flex-shrink: 0 表示缩小比例为 0，表示空间不足，也不缩小

auto: flex-basis: auto 表示分配多余空间之前，项目占据的主轴空间，auto 即项目本来的大小

与之对应的还有 flex: auto ，即 flex: 1 1 auto。 会随着空间放大缩小

[lovelmh13]

前提：

包含了图片的容器设置了flex

.container {
  width: 6.4rem;
  height: 2rem;
  box-sizing: border-box;
  display: flex;
  .img {
    width: 2rem;
    height: 2rem;
    border-radius: 0.2rem;
  }
}

原因:

flex 布局默认不换行，所以宽度不够的时候，元素会被挤

解决办法：

让要固定宽高的元素不会变形

.img {
  width: 2rem;
  height: 2rem;
  border-radius: 0.2rem;
  flex: none; // 或者 flex: 0 0 auto
}