为何图片加入flex容器后突然缩小？flex容器为何不自适应？

你忽略了一个关键层级：图片的直接父元素是.navbar-left，而非.navbar。

没加flex容器时，.navbar-left是默认的块级元素，宽度自动撑满整个视口，所以图片的width:12.3%是视口宽度的12.3%。

但把.navbar设为flex容器后，.navbar-left变成了flex子元素，默认规则是：

• 没有显式设置宽度时，flex子元素的宽度由内容决定；
• 默认flex-shrink:1，允许它在空间不足时被压缩。

这就导致.navbar-left的宽度远小于视口，图片的12.3%是基于这个缩小后的父元素宽度计算的，所以图片看起来突然变小了。

给你几个可行的处理方式：

方式一：阻止flex子元素被压缩 #

给.navbar-left添加flex-shrink:0，让它保持自身应有的宽度，同时可以设置width:100%让它撑满flex容器：

body {
  margin: 0px;
  font-family: "Noto Sans";
}

.navbar {
  display: flex;
  width: 100%;
}

.navbar-left {
  flex-shrink: 0; /* 禁止这个flex子元素被压缩 */
  width: 100%; /* 让它撑满整个flex容器宽度 */
}

.navbar-left_img {
  width: 12.3%;
  padding-top: 2%;
  padding-left: 3%;
}

方式二：直接基于视口设置图片宽度 #

把图片的宽度单位换成vw（视口宽度单位），不管父元素宽度如何，都直接基于视口计算：

body {
  margin: 0px;
  font-family: "Noto Sans";
}

.navbar {
  display: flex;
  width: 100%;
}

.navbar-left_img {
  width: 12.3vw; /* 直接对应视口宽度的12.3% */
  padding-top: 2%;
  padding-left: 3%;
}

方式三：给flex子元素设置基准宽度 #

给.navbar-left设置flex-basis:100%，让它在flex布局中占据整个容器的宽度：

body {
  margin: 0px;
  font-family: "Noto Sans";
}

.navbar {
  display: flex;
  width: 100%;
}

.navbar-left {
  flex-basis: 100%; /* 设置flex子元素的基准宽度为容器100% */
}

.navbar-left_img {
  width: 12.3%;
  padding-top: 2%;
  padding-left: 3%;
}

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