为什么-内容在我的情况下行不通？

Question

找不到为什么.user-name-box & .user-location divs不想留在家长中心的原因.

​

.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-items而不是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>

​