嵌套flexbox内层ul设置justify-content: space-between不生效问题求解

问题根本原因 #

justify-content: space-between 的作用是将flex容器的剩余空白空间平均分配到每个子元素的间隙中，它生效的必要前提是：flex容器的总宽度大于所有子元素的宽度总和，存在可分配的剩余空间。
你外层的header设置了width: 100%，整体宽度远大于内部Logo和nav两个子元素的总宽度，有充足的剩余空间，所以规则可以正常生效。
但内层的ul作为flex容器，你没有给它设置任何宽度属性，它的默认宽度是fit-content，也就是刚好等于内部所有li元素的宽度总和，没有剩余空间可以分配，自然看不到space-between的效果。

解决方案 #

只要给ul或者它的父级nav设置足够的宽度即可，两种常用适配方案：

1. 直接给ul设置固定宽度，按需调整数值即可：

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  width: 420px; /* 数值只要大于所有导航项的总宽度即可 */
}

2. 让导航区域自动占满头部剩余空间，适配性更强：

/* 新增nav规则，让它占满header除Logo外的所有可用空间 */
nav {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
}
nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  width: 45%; /* 也可以设置固定宽度，按需调整 */
  margin: 0;
}

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