justify-content space-between not aligning elements left and right

Question

Alright, so I am trying to use Flexbox to align my form on the left hand side of the screen and my image on the right hand of the screen using justify-content: space-between but when I put that on my .container it doesn't work. Here is what I have so far:

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

My style:

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

img {
  width: 20%;
}

score 0 · Accepted Answer · answered Dec 29 '18 at 01:35

Put the two sections in their own containers, then it can work.

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

Is that the only way to do it? Why doesn't it work without creating the 2 sections? — , Dec 29 '18 at 01:50
Why would it work? You have 6 elements in the main container. How is the browser supposed to know which elements pin left and which ones pin right? If you stack them into a column (like you had in your original code), the flex items flow vertically and `justify-content: space-between` aligns top/bottom not left/right. [This post may help you better understand these concepts and build a better layout](https://stackoverflow.com/a/33856609/3597276). — Michael Benjamin, Dec 29 '18 at 01:54
Ok I see what you mean now. Sorry I was under the impression that I had created something like this before with Flexbox but I was mistaken/looked at the wrong project. Thanks for your help. — , Dec 29 '18 at 02:01

justify-content space-between not aligning elements left and right

1 Answers1