为何无法修改Flex项目（Flex Item）的尺寸？

这个问题的核心在于行内元素的默认特性：你给<a>标签（.naviga类）设置的width和height属性没有生效——因为<a>是默认的行内元素（display: inline），这类元素的尺寸完全由内部内容决定，浏览器会直接忽略width、height这类强制尺寸的设置。所以你的.naviga虽然写了width:10em，但实际没有作用，父元素<li>自然也就只能收缩到内容的宽度（也就是你观察到的min-content）。

解决方法 #

只需要修改.naviga的display属性，把它改成块级元素或者行内块元素，这样width和height就能正常生效了。推荐用block，因为这样整个链接区域（10em宽度）都能响应点击，体验更好：

修改后的CSS代码：

html { box-sizing: border-box; }
* { box-sizing: inherit; margin: 0; padding: 0; }
header nav ul { display: flex; list-style: none; justify-content: center; align-items: center; height: 3em; background-color: #783F27; }
.naviga { 
  border: solid medium; 
  border-radius: 0.4em; 
  margin: 0 0.5em; 
  width: 10em; 
  color: goldenrod;
  display: block; /* 关键：将行内元素改为块级元素 */
  text-align: center; /* 可选：让文字居中，优化视觉效果 */
  line-height: 2em; /* 可选：如果要设置height，用line-height垂直居中文字 */
}

补充说明 #

因为你的<ul>是flex容器，<li>作为flex子项，默认会根据子元素（也就是<a>）的尺寸调整自身宽度。当<a>变成块级元素后，它会撑满<li>的空间，而<li>会因为<a>的固定width:10em被撑开，最终达到你想要的每个导航项宽度一致的效果。

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