justify-content:space-between不生效及Google Icons显示异常问题求助

一、Header Flex布局元素无法分散排列的解决办法 #

你设置的justify-content: space-between没生效，核心原因是浏览器默认给body加了8px左右的margin，导致你的header虽然设了width:100%，但这个宽度是相对于去掉margin后的body内容宽度，并没有真正撑满整个浏览器视口，两个子元素自然没法分散到窗口两端。

解决步骤：

• 先清除body的默认margin：

body {
  margin: 0;
}

• 给header加上box-sizing: border-box，避免后续加padding或border时撑破宽度，还可以加个padding让内容不贴边：

header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 0 16px;
}

调整后header就能撑满视口，两个子元素会分别靠左、靠右排列。

二、Google Icons需要Base标签才显示的情况说明 #

这种情况不太正常，主要和你本地测试的环境有关：

1. 你应该是直接双击html文件用file://协议打开的，没有base标签时，浏览器可能错误地把Google Icons的字体资源解析成本地路径，导致加载失败；
2. 你引用Google Icons的链接是绝对路径（https://fonts.googleapis.com/...），理论上base标签不会影响绝对路径的资源加载，出现这种问题大概率是Edge对file://协议的特殊处理或缓存导致的。

建议：

• 本地测试时去掉base标签，改用本地服务器（比如VS Code的Live Server插件）打开页面，用http://协议访问，就能正常加载图标，不用依赖base标签；
• 等域名注册完成后，再根据线上部署路径设置base标签，避免本地和线上环境的路径冲突。

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