flexbox拒绝按照我的意图证明内容的合理性

Question

我对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内容：space between将在两个输入之间添加空间，使它们浮动到容器的外部边界。没有发生。阅读本文后：justify content属性is'；我尝试了以下方法：

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

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

现在情况看起来更糟了，因为div是一个在另一个上面，而不是紧挨着。添加弹性方向：行不会改变任何东西。有什么建议吗？

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

您已经将.containerdiv作为您的flex容器，它只有一个flex项#location形式：您必须将#location作为您的flex容器，以便它有两个子元素space-between作为您的400px宽的容器

要了解有关flex box的一些基本知识，请访问：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

如果我理解正确，您需要将flexbox添加到父级。您的位置是输入元素的父级。

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

Answer 3

之所以会发生这种情况，是因为您针对的是错误的元素。

Flex在要移动的元素的父元素上工作。

您想要移动form的元素，所以应该将flex应用于form标记，而不是div.container。

因为form标记也是一个div，而不是要移动的元素。

以下是解决您问题的方法：https://codepen.io/Juka99/pen/OJRmPVN

Answer 4

尝试使用#位置的flex框。2个输入的父级是表单而非容器。