为什么证明 - 内容在我的情况下不起作用？
问题描述：
无法找到一个答案，为什么.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>
提前感谢！
答
这是因为您在.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>
是的，当然！ – BodyaK