为什么 justify-content 在我的情况下不起作用？

Question

无法找到为什么 .user-name-box 和 .user-location div 不想停留在父 div 中心...

.main-content{
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        width: 600px;
        background: grey;
    }
        .user-info{
            display: inline-flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-content: center;
            width: 300px;
            background: red;
        }
            .user-name-box{
                display: flex;
                width: 100px;
                height: 100px;
                background: blue;
                color: white;
            }
            .user-location{
                display: flex;
                width: 100px;
                height: 100px;
                background: yellow;
                color: black;
            }

    <div class="main-content">

        <div class="user-info">

            <div class="user-name-box">user-name-box</div>
            <div class="user-location">user-location</div>

        </div>

    </div>

提前致谢！

Answer 1

这是因为您在 .user-info 上使用 align-content 而不是 align-items。

.main-content {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 600px;
  background: grey;
}
.user-info {
  display: inline-flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 300px;
  background: red;
}
.user-name-box {
  display: flex;
  width: 100px;
  height: 100px;
  background: blue;
  color: white;
}
.user-location {
  display: flex;
  width: 100px;
  height: 100px;
  background: yellow;
  color: black;
}

<div class="main-content">

  <div class="user-info">

    <div class="user-name-box">user-name-box</div>
    <div class="user-location">user-location</div>

  </div>

</div>

为什么 justify-content 在我的情况下不起作用？

Why justify-content doesn't work in my case?

css

flexbox

justify