0

i am so confused about flexbox. i tried to use it to align some inputs in a simple form but it won't work the way i was intending. first i did this:

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

and in html:

    <div class="container">
      <form id="location">
        <input type="text" placeholder="Location">
        <input type="submit" value="Get the weather!">
      </form>
    </div>

i was hoping the justify-content: space-between would add space between the two inputs so they floating out to the outer bounds of the container. not happening. after reading this: justify-content property isn't working i tried the following:

.container {
  width: 40vw;
  display: flex;
  justify-content: center;
}

.item {
  flex-grow: 1;
}

and in html

    <div class="container">
      <form id="location">
        <div class="item"><input type="text" placeholder="Location"></div>
        <div class="item"><input type="submit" value="Get the weather!"></div>
      </form>
    </div>

now it looks even worse, because the divs are on top of each other, instead of next to each other. adding flex-direction: row doesn't change a thing. any advice?

пaean
  • 61
  • 8

4 Answers4

1

#location{
  width: 40vw;
  display: flex;
  justify-content: space-between;
}
 <div class="container">
      <form id="location">
        <div class="item"><input type="text" placeholder="Location"></div>
        <div class="item"><input type="submit" value="Get the weather!"></div>
      </form>
    </div>

You have made .container div as your flex-container, which has only one flex-item #location form: You must make #location form your flex container so that it has two child elements to space-between your 400px width container And it will work fine

To brush up some fundamentals about flex-box visit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Imran Rafiq Rather
  • 7,677
  • 1
  • 16
  • 35
0

If i understands correctly you need to add flexbox to parent. Your location is parent of the input elements.

.container {
 width: 40vw;
  #location   {
    display: flex;
    justify-content: space-between;
              }
            }
Gurkan Ugurlu
  • 412
  • 2
  • 8
0

This is happening because you are targeting the wrong element.

Flex works on a parent of the element that you want to move.

You want to move elements of the form, so you should apply flex to your form tag instead of the div.container.

Because the form tag is also just a div, not an element to be moved.

Here is solution to your problem : https://codepen.io/Juka99/pen/OJRmPVN

Just Alex
  • 457
  • 4
  • 6
0

Try use flex box for #location. The parent of 2 inputs, are form not container.

Sanaz Mahmoudi
  • 98
  • 7