爲什麼證明 - 內容在我的情況下不起作用？

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>