为什么在容器中设置justify-content: space-between后属性不生效？

1. justify-content: space-between 不生效问题 #

你给flex容器的三个子项都设置了flex-grow属性，该属性的作用是让子项按比例分配容器的剩余空白空间：

• .one和.three的flex-grow:1
• .two的flex-grow:2
  三个子项已经把容器的所有剩余空间瓜分完毕，自然没有多余的空隙供space-between生成两端对齐的间距，所以该属性看起来没有生效。

修复方案 #

如果要保留space-between的间距效果，删除三个子项的flex-grow属性即可；如果需要保留子项的宽度占比，可以通过给子项设置固定宽度/flex-basis，或者改用gap属性设置子项间距，按需选择即可。

2. 边框不生效问题 #

你写的border:white、border:black属于不完整的属性声明，浏览器无法识别生效。border简写属性需要同时指定宽度、样式、颜色三个参数，比如要写1px宽度的黑色实线边框，正确写法是border: 1px solid black;，你只写了颜色参数，边框默认宽度为0，所以看不到效果。

额外优化建议 #

• 你给.img设置了固定宽度1350px，在宽度小于1350px的设备上会出现横向滚动条，建议改成max-width: 100%; height: auto;实现自适应缩放
• 导航栏<ul>的直接子元素只能是<li>，你现在把<form>和<button>直接放在<ul>里属于HTML语法不规范，也不利于后续维护，建议把搜索相关内容移到<ul>外部，改用flex布局实现整个导航栏的排列，比现在用float+绝对定位的方案兼容性和可维护性更好。

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