无法正确对齐flexbox与justify-content

Question

我正在尝试创建一个容器，其顶部和两侧各有两个div，底部还有另一个内容。 我已经用flexbox完成了这项工作。我可以按照自己的意愿对齐底部内容，但顶部内容会对齐顶部，但不能左右对齐。我以为使用

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

Answer 1

我想你只需要做的框弯曲方向为列：

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

Answer 2

你必须让这两个元素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>