CSS 媒体查询和 flex 方向

Question

我正在学习 Udemy 上的 Traversy 课程，我在 HTML CSS 方面还不到一个月，所以是个新手。 所以在课程的一部分中，他让我们做一个网站，在最后几集中，他解释了如何让它对设备做出响应。

这是 html 上有问题的部分：

  <!-- Section: Contact -->
  <section id="contact">
    <div class="contact-form bg-primary p-2">
      <h2 class="m-heading">Contact Us</h2>
      <p>Please use the form below to contact us</p>
      <form action="">
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" name="name" id="name" placeholder="Enter Name">
        </div>
        <div class="form-group">
          <label for="email">E-mail</label>
          <input type="email" name="email" id="email" placeholder="Enter E-mail">
        </div>
        <div class="form-group">
          <label for="phone">Phone Number</label>
          <input type="text" name="phone" id="phone" placeholder="Enter Phone Number">
        </div>
        <div class="form-group">
          <label for="message">Message</label>
          <textarea name="message" id="message" placeholder="Enter Message"></textarea>
        </div>
        <input type="sumbit" value="Send" class="btn btn-dark">
      </form>


    </div>
    <div class="map"></div>
  </section>

这就是我们在主 css 文件上所做的：

/* Section: Contact */

#contact {
  display: flex;
}

#contact .map, #contact .contact-form {
  flex: 1;
}

#contact .contact-form .form-group {
  margin: 0.75rem;

}

#contact .contact-form label {
  display: block;
}

#contact .contact-form input, 
#contact .contact-form textarea {
  width: 100%;
  padding: 0.5rem;

}

我们不得不将地图放在移动 css 表单上的联系表单下，但是，简单地说，只有当他在他的电脑上完成时，它才起作用。 在我的地图上消失了 XD：

#contact {
    flex-direction: column;
  } 


  #contact .map {

    height: 200px;

  }

我试图解决方法：

  #contact {
    flex-wrap: wrap;
  }

  #contact .contact-form {
    display: block;
  }

  #contact .map {
    display: block;

  }

但同样的事情发生了。 假设我还不够了解发生了什么，更不用说自己解决了 XD

Answer 1

只需添加：

#contact {
    display: block;
    flex-direction: column;
}