CODEWITHSUNDEEP
cssflexbox
пaean
пaean

Reputation: 71

flexbox refuses to justify content as i intended

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?

Upvotes: 0

Views: 895

Answers (4)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8078

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

Upvotes: 1

Sanaz Mahmoudi
Sanaz Mahmoudi

Reputation: 108

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

Upvotes: 0

Just Alex
Just Alex

Reputation: 457

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

Upvotes: 0

Gurkan Ugurlu
Gurkan Ugurlu

Reputation: 467

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

Upvotes: 0

Related Questions