无法正确对齐flexbox与justify-content
问题描述:
我正在尝试创建一个容器,其顶部和两侧各有两个div,底部还有另一个内容。 我已经用flexbox完成了这项工作。我可以按照自己的意愿对齐底部内容,但顶部内容会对齐顶部,但不能左右对齐。我以为使用无法正确对齐flexbox与justify-content
justify-content: space-between;
会点它。我也试图把。社会DIV与margin-left: auto;
这是我的代码:
.boxes {
background-size: cover;
background-position: center center;
display: flex;
align-items: flex-end;
background-color: red;
width: 50%;
}
.branding {
display: flex;
align-items: flex-start;
justify-content: space-between;
height: 200px;
}
<div class="boxes">
<div class="branding">
<div class="logo">logo</div>
<div class="social">social</div>
</div>
<div>
<h2>Case Study Title</h2>
<p>A catchy description for our case study. We worked hard.</p>
</div>
</div>
有什么我错过了吗?
-Thanks
答
我想你只需要做的框弯曲方向为列:
.boxes {
background-size: cover;
background-position: center center;
display: flex;
flex-direction:column; /* add this */
background-color: red;
width: 50%;
}
.branding {
width:100%;
display: flex;
flex-direction:row;
justify-content: space-between;
height: 200px; /* this seems to cause a big vertical gap that isn't in your original */
}
<div class="boxes">
<div class="branding">
<div class="logo">logo</div>
<div class="social">social</div>
</div>
<div>
<h2>Case Study Title</h2>
<p>A catchy description for our case study. We worked hard.</p>
</div>
</div>
答
你必须让这两个元素display: flex;
,取下显示器挠性在容器上
.boxes {
background-size: cover;
background-position: center center;
background-color: red;
width: 50%;
}
.branding {
display: flex;
justify-content: space-between;
height: 100px;
}
.content {
display: flex;
justify-content: center;
}
<div class="boxes">
<div class="branding">
<div class="logo">logo</div>
<div class="social">social</div>
</div>
<div class="content">
<div>
<h2>Case Study Title</h2>
<p>A catchy description for our case study. We worked hard.</p>
</div>
</div>
</div>