我的显示：flex没有正确包装我的内容

Question

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要做两件事：

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

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

对于能够包装的弹性项目，需要允许它，并flex-wrap: wrap修复它，然后，因为你们两个都有50％的宽度+ 5px的边距（每边） ，它不会超过1，所以通过使用CSS Calc()从宽度减去边距，现在可以容纳2个项目。

Stack snippet

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;