필자의 경우 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

align-items 대신 align-content을 사용하고 있기 때문에 그 원인은 .user-info입니다.

.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>