我正在努力讓& lt第節(jié)-文本& gt在三張圖片的上面。圖像應(yīng)該并排(從左到右)使用flexbox，但我似乎不能做到這一點(diǎn)。我?guī)缀?00%確定我的HTML的結(jié)構(gòu)缺少了什么。我試著用& ltdiv & gt但是這樣一來，section-text就會一直被擠到左邊，而& lthr & gt會是垂直的而不是水平的。

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Roboto:100,300,700');


html, body {
  margin: 0;
  padding: 0;
  font-family: Roboto;
  font-size: 10px;
  line-height: 3.5em;
  font-weight: 300;
}

h1, h2, h3, h4, h5 {
  font-family: Roboto Condensed;
}

h1 {
  font-size: 9em;
  text-align: center;
  text-transform: uppercase;
}

h2 {
  font-size: 5em;
  text-align: center;
  text-transform: uppercase;
  line-height: 3em;
  color: white;
  text-shadow: #020819 8px -20px 9px
}

h3 {
  font-size: 4.2em;
  text-align: center;
  line-height: 1em;
  margin-top: 0;
}

h4 {
  font-size: 1.5em;
  letter-spacing: 0.4;
  line-height: 1em;
  margin-bottom: 15px;
}

h5 {
  font-size: 1.2em;
  line-height: 1em;
  margin-top: 0;
  margin-bottom: 0;
}

.dark-background {
  background-color: rgb(25, 33, 41);
  color: white;
}

.service-box img {
  width: 125px;
}

#team .section-text {
  font-size: 1.9em;
  text-align: center;
  margin-bottom: 15px;
}

#team .member-name {
  font-size: 1.5em;
  font-weight: 700;
}

#team {
  padding: 75px 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
}

#team>div>article {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

#team p {
  width: 60%;
  margin: 10px auto;
}

#team hr {
  margin: 20px auto 30px auto;
  width: 40%;
}

.section-team img {
  width: 250px;
  height: 180px;
}

<section id="team" class="dark-background section-team">

  <div>
    <h4 class="section-text">Team</h4>
    <p class="section-text">Our team collectively has 75 years of experience. Odds are, when you jump out of the plane with these professionals, you wont go splat.</p>
    <hr></hr>
  </div>
  <div>
    <article>
      <p class="member-name"><strong>Harold Rothsten,</strong></p>
      <img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_c18b1c463b80090894237a262dfdfbad.jpg" alt=" diving in cloudy day">
    </article>

    <article>
      <p class="member-name"><strong>Susan Phillips,</strong></p>
      <img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_a18d6123a7c8e75f7e70a4e59b941093.jpg" width=" 200px" alt=" skydiving blue sky">
    </article>

    <article>
      <p class="member-name"><strong>Tyalor Roberts,</strong></p>
      <img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_7104a331530d1b0611da55093b7dc421.jpg" width=" 200px" alt=" diving in a sunn day">
    </article>
  </div>

</section>

只有flex容器的直接子容器是flex項(xiàng)目:

.example-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="example-container">
  <div class="ex-item-1">
    ex-item-1
    <article>article</article>
  </div>
  <div class="ex-item-2">ex-item-2</div>
  <div class="ex-item-3">ex-item-3</div>
</div>