css - 我的 flexbox 元素不会水平显示？

Question

一段时间以来，我一直在努力解决这个奇怪的问题。

我的 flexbox 元素不会水平显示？

HTML:

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

CSS:

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