flex布局下单个图片宽度更大时如何设置元素间一致间距

解决方案 #

这里分两种常见需求场景，可根据实际需要选择： #

场景1：仅保证每组内img块和p标签的间距一致（p标签位置随img宽度变化） #

直接在.wrap flex容器上使用column-gap属性即可，该属性专门用于设置flex子元素之间的主轴间距，不需要给子元素额外设置margin或padding，完全符合要求。
修改后的CSS代码如下：

.wrap{
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  /* 数值可根据需要的间距调整 */
  column-gap: 12px;
}

.img{
  width: 30px;
  height: 20px;
  background: red;
  /* 防止img块被挤压变形 */
  flex-shrink: 0;
}
.img1{
  width:40px;
}

场景2：既保证每组img和p的间距一致，又要所有p标签左对齐 #

如果需要所有p都在同一垂直线上，只需要给所有img块设置统一的最小占位宽度为最大的img宽度（也就是40px），多余的宽度自动留白即可，配合gap使用：
修改后的CSS代码如下：

.wrap{
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  column-gap: 12px;
}

.img{
  width: 30px;
  height: 20px;
  background: red;
  flex-shrink: 0;
  /* 统一设置最小宽度为最大img的宽度 */
  flex-basis: 40px;
  /* 宽度小于40px的img，内容左对齐，多余位置留白 */
  display: flex;
  justify-content: flex-start;
}
.img1{
  width:40px;
}

两种方案都不需要给子元素设置固定的margin或padding数值，都是通过flex原生布局属性实现，维护性更高。

内容的提问来源于stack exchange，提问作者Rick