不对齐元素之间左右对齐空间

Question

好的，所以我尝试使用justify-content: space-between将Flexbox对齐在屏幕的左侧，将图像对齐在屏幕的右侧，但是当我将其放在{{1 }}不起作用。这是我到目前为止的内容：

.container

我的风格：

<form>
  <div class="heading">
    <h1 class="callout">Send Us A Message!</h1>
  </div>

  <div class="container">
    <div class="form-group">
      <label>First Name</label>
      <input type="text" class="form-control" name="firstname">
    </div>

    <div class="form-group">
      <label>Last Name</label>
      <input type="text" class="form-control" name="lastname">
    </div>

    <div class="form-group">
      <label>Phone Number</label>
      <input type="text" class="form-control" name="phonenumber">
    </div>

    <div class="form-group">
      <label>Email Address</label>
      <input type="email" class="form-control" name="email">
    </div>

    <div class="form-group">
      <label>Message</label>
      <textarea name="message" cols="30" rows="10">
              </textarea>
      <button class="btn-1">Send</button>
    </div>

    <div class="image">
      <img src="img/city.jpg" alt="">
    </div>
  </div>
</form>

Answer 1

将这两个部分放在各自的容器中，然后它就可以工作。

.container {
  display: flex;
  justify-content: space-between;
}

section:first-child {
  background-color: orange;
}

section:last-child {
  background-color: lightgreen;
}

.image {
  border: 2px dashed black;
  height: 100px;
  width: 100px;
}

<form>
  <div class="heading">
    <h1 class="callout">Send Us A Message!</h1>
  </div>
  <div class="container">

    <section><!-- container one -->

      <div class="form-group">
        <label>First Name</label>
        <input type="text" class="form-control" name="firstname">
      </div>
      <div class="form-group">
        <label>Last Name</label>
        <input type="text" class="form-control" name="lastname">
      </div>
      <div class="form-group">
        <label>Phone Number</label>
        <input type="text" class="form-control" name="phonenumber">
      </div>
      <div class="form-group">
        <label>Email Address</label>
        <input type="email" class="form-control" name="email">
      </div>
      <div class="form-group">
        <label>Message</label>
        <textarea name="message" cols="30" rows="10"> 
                </textarea>
        <button class="btn-1">Send</button>
      </div>

    </section>

    <section><!-- container two -->

      <div class="image"> image
        <img src="img/city.jpg" alt="">
      </div>

    </section>

  </div>

</form>