如何使用 CSS Flexbox 将文本和图像放在同一行？

Question

我的个人作品集中有一些项目，我希望网格的每一行都将图像推向左侧或右侧（奇数行或偶数行），并在另一侧带有段落描述。基本上我想要一个段落和图像在同一行上相互对齐。当我这样做时，文本在图像上方，这是我不想要的。 HTML 代码是“项目”部分的开头

.project-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 60px;
  transition: .5s ease;
}

.odd {
  display: flex;
  justify-content: flex-end;
}

.even {
  display: flex;
  justify-content: flex-start;
}

<div class="container">
  <div class="row odd">
    <p class="project-decription">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, similique consequatur expedita natus voluptatum non sint ea vero dignissimos eius. Eos animi, praesentium odit mollitia provident totam repudiandae sapiente cumque. Lorem ipsum, dolor
      sit amet consectetur adipisicing elit. Similique qui, quam dolorem aperiam perferendis minus iure veniam voluptatum molestias, sed non ea obcaecati nemo nisi amet dignissimos illo autem! Aliquam.</p>
    <div class="project-box col-lg-4 col-md-6 col-sm-12">
      <img src="img/whatfoodisthere.png" class="project-image" alt="Project 1">
      <div class="middle">
        <a href="http://whatfoodisthere.com">
          <div class="text">
            Visit Site
          </div>
        </a>
      </div>
      <span class="project-name">Recipe Library</span>
    </div>
  </div>

Answer 1

这是因为您使用的是引导程序中的行类。如果你删除它，它们将在同一行