如何让图片容器保持固定宽高？容器未呈正方形原因解析

你设置了.image-wrapper的宽高为100px，但它没有呈现正方形，核心原因是flex布局的空间分配规则导致容器宽度被挤压：

• .container是flex容器，内部包含.image-wrapper和.outter-wrapper两个子元素
• .outter-wrapper设置了width: 100%，会试图占据.container的全部宽度，加上.image-wrapper的100px宽度和margin，总宽度超过了容器可用空间
• flex子元素默认flex-shrink: 1（空间不足时自动收缩），所以.image-wrapper的实际宽度被压缩到小于100px，而高度保持100px，最终变成矩形

解决办法（二选一即可） #

1. 禁止.image-wrapper被压缩

给.image-wrapper添加flex-shrink: 0，固定它的宽度：

.image-wrapper {
  width: 100px;
  height: 100px;
  background-color: hotpink;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  flex-shrink: 0; /* 新增：禁止宽度收缩 */
}

2. 让.outter-wrapper自动占据剩余空间

去掉.outter-wrapper的width: 100%，改用flex: 1，让它自适应容器剩余空间：

.outter-wrapper {
  /* width: 100%; 删除这行 */
  flex: 1; /* 新增：占据剩余空间 */
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}

内容的提问来源于stack exchange，提问作者four-eyes