Meine Flexbox-Artikel werden nicht horizontal angezeigt?

Question

Ich habe versucht, dieses seltsame Problem zu lösen, das ich seit einiger Zeit habe. Vorstellung hier in der Hoffnung, für einige Tipps :)

<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

Sie nur ein einziges direktes Kind (flex Artikel) des Flex Elternteil haben, so gibt es nur 1 Punkt horizontal angezeigt werden soll. Damit mehrere Objekte horizontal angezeigt werden können, benötigt der Flex-Parent mehrere direkte untergeordnete Elemente. Wenn ich auf die Struktur schaue, nehme ich an, dass Sie das anstreben?

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