html - 使用 Flexbox 显示不工作的内容 HTML CSS

Question

我有一个带有图像和文本的 flexbox。目前，我正在使用边距和填充，但是使用对齐内容和对齐内容会更好吗？

目前，我正在做的事情无法正常工作，我似乎无法让图像与其文字对齐。有没有办法让文本和图像相互内联。

网站:

/*flexbox*/
section {
    display: flex;
    flex-flow: wrap;
    width: 80%;

    margin: 1em auto;
    padding: 1em;
    
    border: solid .125em #00aaff;
    background-color: white;
    opacity:0.9;
}

section > * {
    flex: 1 1 40%;
    padding: 1em;
}

/*Images*/
figure img {
    width:50%;
    margin-left:5em;
}

/*Text*/
p{
    padding: 1em;
    margin-left:-3em;
}

<section id="display">   
        <figure id="image1">
            <img src="images/512x512.png" alt="Dynamo">
        </figure>
         
        <article>
                <p><span id="name">Houston Dynamo</span></p>
                <p>Sport Science/Sport Performance Intern</p>
                <p><time datetime="2018-01-01"></time>January 2019 - Present</p>
        </article>
        
        <figure>
            <img src="images/UW-Logo.png" alt="UIC">
        </figure>
        
         <article>
                <p><span id="name">University of Madison Wisconsin-Madison</span></p>
                <p>Strength and Conditioning Coach, Graduate Assistant</p>
                <p><time datetime="2011-08-01"></time>August 2018 - <time datetime="2014-12-31">December 2018</time></p>
        </article>

Answer 1

真的有助于避免像这样的布局的 flex wrap。我已经将你布局的每一“行”包装在一个 div 中，我已经应用了 flex-wrapper-thingy 类 display: flex 所以 flexbox 布局发生在每个行。

现在 flexbox 配置只与每对 figure 和 article 元素相关。 align-items: center 是让这些元素很好地排列的完美方式，尽管它们的高度不同。现在看看调整间距和相对大小需要多少规则。

/*flexbox*/
section {
  width: 80%;
  margin: 1em auto;
  padding: 1em;
  border: solid .125em #00aaff;
  background-color: white;
}

.flex-wrapper-thingy {
  display: flex;
  align-items: center;
  justify-content: space-between; // maybe you want to try "center" too
}

section > * {
  padding: 1em;
}

/*Images*/
figure {
  width: 50%;
}

/*Text*/
article {
  margin-left: 20px;
}

<section id="display">
  <div class="flex-wrapper-thingy">
    <figure id="image1">
      <img src="https://picsum.photos/200" alt="Dynamo">
    </figure>
    <article>
      <p><span id="name">Houston Dynamo</span></p>
      <p>Sport Science/Sport Performance Intern</p>
      <p><time datetime="2018-01-01"></time>January 2019 - Present</p>
    </article>
  </div>

  <div class="flex-wrapper-thingy">
    <figure>
      <img src="https://picsum.photos/201" alt="UIC">
    </figure>
    <article>
      <p><span id="name">University of Madison Wisconsin-Madison</span></p>
      <p>Strength and Conditioning Coach, Graduate Assistant</p>
      <p><time datetime="2011-08-01"></time>August 2018 - <time datetime="2014-12-31">December 2018</time></p>
    </article>
  </div>
</section>