無法正確對齊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>