フレックスボックスのアイテムは水平に表示されませんか？

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

あなただけのフレックス親の単一直接の子（フレックス項目）を持っているので、水平に表示するための唯一の1項目があります。複数のものを水平に表示するには、フレックスの親に複数の直接の子が必要です。構造を見て、これはあなたが行っていることだと思いますか？

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