html - Flex 元素不会正确包裹和收缩

Question

我希望右侧的 flex 元素在较小的设备上环绕在图像下方。我还希望两个 flex 元素在收缩时彼此具有相同的高度(以及浏览器窗口)。

.new-collection-wrapper {
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.new-collection-card {
  width: 80%;
  margin: 5em 0;
  display: flex;
  align-items: center;
}

.new-collection-card-img img {
  height: 400px;
  width: auto;
}

.new-collection-content {
  height: 400px;
  color: #f1f1f1;
  background-color: #111111;
  padding: 0 3em;
}

.new-collection-content h3 {
  font-size: 2.5em;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: .2em;
}

.new-collection-content p {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: .8em;
  letter-spacing: 1px;
}


/* layout for medium screens */

@media screen and (min-width: 810px) {
  .new-collection-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

<main class="new-collection-wrapper">
  <section class="new-collection-card">
    <div class="new-collection-card-img">
      <img src="http://www.petmania.ie/images/default-source/cat/petmania-kitten-1.jpg?sfvrsn=4" alt="new collection" alt="new collection">
    </div>
    <div class="new-collection-content">
      <h3>AW19 collection</h3>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis, a sequi molestias nam odit sunt. Unde dolore fugit suscipit amet.</p>
      <a href="#" class="call-to-action"><span>JOIN</span></a>
    </div>
  </section>
  <!-- End of New Collection -->
</main>

Answer 1

为较小的屏幕更改flex-direction(注意媒体查询已更改为@media screen and (max-width: 810px)) 在 new-collection-card 到 column - 请看下面的演示:

.new-collection-wrapper {
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.new-collection-card {
  width: 80%;
  margin: 5em 0;
  display: flex;
  align-items: center;
}

.new-collection-card-img img {
  height: 400px;
  width: auto;
}

.new-collection-content {
  height: 400px;
  color: #f1f1f1;
  background-color: #111111;
  padding: 0 3em;
}

.new-collection-content h3 {
  font-size: 2.5em;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: .2em;
}

.new-collection-content p {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: .8em;
  letter-spacing: 1px;
}


@media screen and (max-width: 810px) {
  .new-collection-card { /* change the flex direction */
    flex-direction: column;
  }
}

<main class="new-collection-wrapper">
  <section class="new-collection-card">
    <div class="new-collection-card-img">
      <img src="http://www.petmania.ie/images/default-source/cat/petmania-kitten-1.jpg?sfvrsn=4" alt="new collection" alt="new collection">
    </div>
    <div class="new-collection-content">
      <h3>AW19 collection</h3>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis, a sequi molestias nam odit sunt. Unde dolore fugit suscipit amet.</p>
      <a href="#" class="call-to-action"><span>JOIN</span></a>
    </div>
  </section>
  <!-- End of New Collection -->
</main>