justify-content:center与height:fit-content失效问题求助

嗨，我看你遇到了flex布局里的两个小麻烦：justify-content:center没达到预期的居中效果，还有height:fit-content没法让div高度贴合文本，尤其是右侧div表现异常。我来帮你捋捋问题出在哪，以及怎么解决~

问题1：justify-content:center 没生效的原因&解决 #

你给.container加了justify-content:center，但它是控制容器内部flex子元素（也就是.left和.right）在容器内的水平对齐，而容器本身在页面里可能是左对齐的，所以整体看起来没居中。

要让整个容器在页面水平居中，需要给.container加一行：

margin: 0 auto;

问题2：height:fit-content 不生效的原因&解决 #

你设置了.container的height:fit-content，但flex容器默认高度就是由内容决定的，这个属性其实不是关键问题。真正的原因是flex布局默认的align-items: stretch——它会强制所有flex子元素的高度和容器高度保持一致（也就是和最高的那个子元素同高），所以你的.right div被拉伸了，没法贴合自身文本高度。

解决方法是给.container添加：

align-items: flex-start;

这样每个子元素的高度会由自身内容决定，不会被强制拉伸。

修改后的核心代码块 #

把你的.container样式改成这样就可以解决两个问题了：

.container {
  max-width: 1280px;
  margin: 0 auto; /* 容器在页面水平居中 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center; /* 内部子元素在容器内水平居中 */
  align-items: flex-start; /* 子元素高度贴合自身内容 */
  /* height: fit-content; 可留可删，flex容器默认就是内容高度 */
}

额外小提示 #

如果之后你想让子元素在垂直方向居中（同时接受高度拉伸），可以把align-items改成center；要是想让子元素底部对齐，就改成flex-end，根据需求调整就行~

备注：内容来源于stack exchange，提问作者Borys