Flexbox отказывается оправдывать контент, как я предполагал
я так запутался с flexbox. я пытался использовать его для выравнивания некоторых входных данных в простой форме, но это не сработает так, как я планировал. сначала я сделал это:
.container {
width: 40vw;
display: flex;
justify-content: space-between;
}
и в html:
<div class = "container">
<form id = "location">
<input type = "text" placeholder = "Location">
<input type = "submit" value = "Get the weather!">
</form>
</div>
я надеялся, что justify-content: space-between добавит пространство между двумя входными данными, чтобы они выходили за внешние границы контейнера. не происходит. после прочтения этого: свойство justify-content не работает я попробовал следующее:
.container {
width: 40vw;
display: flex;
justify-content: center;
}
.item {
flex-grow: 1;
}
и в хтмл
<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>
теперь это выглядит еще хуже, потому что элементы div находятся друг над другом, а не рядом друг с другом. добавление flex-direction: row ничего не меняет. любой совет?
Ответы 4
Если я правильно понимаю, вам нужно добавить flexbox к родителю. Ваше местоположение является родителем элементов ввода.
.container {
width: 40vw;
#location {
display: flex;
justify-content: space-between;
}
}
Это происходит потому, что вы нацелились не на тот элемент.
Flex работает с родителем элемента, который вы хотите переместить.
Вы хотите переместить элементы form, поэтому вам следует применить flex к тегу form вместо div.container.
Потому что тег form — это просто div, а не элемент, который нужно перемещать.
Вот решение вашей проблемы: https://codepen.io/Juka99/pen/OJRmPVN
#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>Вы сделали .container div своим flex-контейнером, который имеет только одну форму #location flex-элемента: вы должны сделать #location форму вашего flex-контейнера, чтобы у него было два дочерних элемента для space-between вашего контейнера шириной 400 пикселей. И это будет работать нормально
Чтобы освежить некоторые основы flex-box, посетите: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Попробуйте использовать flex box для #location. Родитель 2 входов - это форма, а не контейнер.