flex布局中justify-content不生效但align-items生效的原因是什么

问题原因 #

justify-content 属性的作用是分配 Flex 容器主轴方向上的剩余空白空间，只有当容器的主轴尺寸（这里是水平宽度）大于内部所有子元素的总宽度时，才能看到对齐效果。
你当前的 .board 容器没有设置明确宽度，宽度默认由内部子元素撑开：

• 子元素 .color-board 宽度为100px
• 子元素 .drawer 宽度为732px
• 子元素 .tool-board 没有设置宽度也没有内容，宽度为0
  三者总宽度约为832px，.board 的宽度刚好等于这个值，没有剩余空白空间可以分配，所以 justify-content: space-around 看起来没有生效，而不依赖剩余空间的 align-items、flex-flow 属性可以正常生效。

解决方法 #

你可以任选一种方案调整：

• 给 .board 设置大于子元素总宽度的固定宽度，例如添加属性 width: 1000px;
• 给 .board 设置相对父容器的自适应宽度，例如添加属性 width: 100%; box-sizing: border-box;，让容器占满父级 main 的可用宽度
• 如果不需要弹性间距，也可以直接给子元素设置左右 margin 来控制间距

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