我的flexbox項目不會顯示horizo​​ntaly？

Question

一直試圖解決這個奇怪的問題，我有一段時間了。在此處詢問一些提示:)

<div class="subSection contact"> 
<div class="card"> 
    <img class="avatar" src="img/man.png"> 
    <p>Hello</p> 
    <p>IS IT ME YOUR LOOKING FOR</p> 
<img class="avatar" src="img/man.png"> 
    <p>Hello</p> 
    <p>IS IT ME YOUR LOOKING FOR</p> 
<img class="avatar" src="img/man.png"> 
    <p>Hello</p> 
    <p>IS IT ME YOUR LOOKING FOR</p> 
    </div> 
</div> 

.contact { 
display: flex; 
justify-content: space-around; 
align-items: center; } 

Answer 1

您只有一個flex父項的直接子項（flex項目），因此只有1個項目要水平顯示。爲了讓多個事物水平顯示，flex父級需要多個直接子級。看看這個結構，我想這就是你要做的事情？

.contact { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
}

<div class="subSection contact"> 
 
    <div class="card"> 
 
    <img class="avatar" src="img/man.png"> 
 
    <p>Hello</p> 
 
    <p>IS IT ME YOUR LOOKING FOR</p> 
 
    </div> 
 
    <div class="card"> 
 
    <img class="avatar" src="img/man.png"> 
 
    <p>Hello</p> 
 
    <p>IS IT ME YOUR LOOKING FOR</p> 
 
    </div> 
 
    <div class="card"> 
 
    <img class="avatar" src="img/man.png"> 
 
    <p>Hello</p> 
 
    <p>IS IT ME YOUR LOOKING FOR</p> 
 
    </div> 
 
</div>