html - 我的显示 :flex does not wrap my content properly

Question

我正在做我的作业，我很难弄清楚为什么我的内容没有正确包装在我的盒子里。我检查了父内容区域，它使用百分比而不是像素并且不占用超过屏幕区域。我已经添加了 html 和 css 的代码。

#popularLocationsCapsule {
  width: 90%;
  margin-left: 5%;
  display: flex;
}

.popularTemplate {
  width: 50%;
  margin: 5px;
  min-width: 400px;
  max-width: 600px;
}

.popularTemplateMain {
  border: 1px solid black;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.popularTemplateMain img {
  width: 65%;
  height: 65%;
  margin: 2px;
}

.popularTemplateDetails {
  width: 40%;
  text-align: center;
}

.popularTemplateDetails p {
  background: #F7882F;
  height: 12.3%;
  padding-top: 5.5%;
  padding-bottom: 7%;
  margin: 1%;
  color: white;
}

<div id="popularLocationsCapsule">

  <section class="popularTemplate">
    <section class="popularTemplateMain">
      <img src="images/london.jpg" />
      <section class="popularTemplateDetails">
        <p>London, GB </p>
        <p>23 October</p>
        <p>7 nights</p>
        <p>23 kgs Luggage</p>
      </section>
    </section>
  </section>

  <section class="popularTemplate">
    <section class="popularTemplateMain">
      <img src="images/tokyo.jpg" />
      <section class="popularTemplateDetails">
        <p>Tokyo, JPN </p>
        <p>6 August</p>
        <p>13 nights</p>
        <p>21 kgs Luggage</p>
      </section>
    </section>
  </section>

  <section class="popularTemplate">
    <section class="popularTemplateMain">
      <img src="images/gravityfalls.jpg" />
      <section class="popularTemplateDetails">
        <p>Gravity Falls </p>
        <p>18 June</p>
        <p>6.18 Nights</p>
        <p>618 kgs Luggage</p>
      </section>
    </section>
  </section>
</div>

Answer 1

您需要做两件事:

• 将 flex-wrap: wrap; 添加到 #popularLocationsCapsule

• 将 .popularTemplate 上的设置更改为 width: calc(50% - 10px);

要使 flex 元素能够换行，就需要允许它，并且 flex-wrap: wrap 修复它，然后，因为你们都有 50% 的宽度 + 边距5px(每边)，不会超过 1，所以通过从宽度中减去边距，使用 CSS Calc() ，现在可以容纳 2 件元素。

堆栈片段

#popularLocationsCapsule {
  width: 90%;
  margin-left: 5%;
  display: flex;
  flex-wrap: wrap;                      /*  added  */
}

.popularTemplate {
  width: calc(50% - 10px);              /*  changed  */
  margin: 5px;
  min-width: 400px;
  max-width: 600px;
}

.popularTemplateMain {
  border: 1px solid black;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.popularTemplateMain img {
  width: 65%;
  height: 65%;
  margin: 2px;
}

.popularTemplateDetails {
  width: 40%;
  text-align: center;
}

.popularTemplateDetails p {
  background: #F7882F;
  height: 12.3%;
  padding-top: 5.5%;
  padding-bottom: 7%;
  margin: 1%;
  color: white;
}

<div id="popularLocationsCapsule">

  <section class="popularTemplate">
    <section class="popularTemplateMain">
      <img src="images/london.jpg" />
      <section class="popularTemplateDetails">
        <p>London, GB </p>
        <p>23 October</p>
        <p>7 nights</p>
        <p>23 kgs Luggage</p>
      </section>
    </section>
  </section>

  <section class="popularTemplate">
    <section class="popularTemplateMain">
      <img src="images/tokyo.jpg" />
      <section class="popularTemplateDetails">
        <p>Tokyo, JPN </p>
        <p>6 August</p>
        <p>13 nights</p>
        <p>21 kgs Luggage</p>
      </section>
    </section>
  </section>

  <section class="popularTemplate">
    <section class="popularTemplateMain">
      <img src="images/gravityfalls.jpg" />
      <section class="popularTemplateDetails">
        <p>Gravity Falls </p>
        <p>18 June</p>
        <p>6.18 Nights</p>
        <p>618 kgs Luggage</p>
      </section>
    </section>
  </section>
</div>