为什么"对齐内容:拉伸"需要"弹性增长"才能使输入元素扩展

Question

在下面的代码片段中，我正在制作响应表单，其中标签在移动设备上，左侧是桌面。具有.field类的元素具有justify-content: stretch，这应该使项目扩展以适应可用空间。

但是，我发现<input>元素没有扩展。我必须向它添加flex-grow: 1才能使其扩展以填充可用宽度。

这表明我不明白stretch在做什么。为什么需要flex-grow。

MDN 说：

对齐内容：拉伸; /* 均匀分配物品 拉伸"自动"尺寸的物品以适合 容器 */

您可以在下面看到.input元素具有width: auto。

更新：我在下面添加了div.not-needed元素，以显示飞行的孩子可以成为灵活的父母，这并没有区别。这样，我就把两层灵活的父母分开了。

稍后在MDN链接中它说：

注意：弹性框(弹性框)不支持拉伸。

因此，我认为stretch值目前仅对grid有效，而不是flexbox。

.container {
display: flex;
align-items: stretch;
flex-direction: column;
}
.label {
width: 100px;
}
.input {
width: auto;   
flex-grow: 1;
}
.field {
display: flex;
justify-content: stretch;
flex-wrap: wrap;
}

<div class="container">
<div class="not-needed">
<div class="field">
<label for="ID_FIELD_1" class="label">Label 1</label>
<input  id="ID_FIELD_1" class="input" type="text" name="field_1" value="Value 1">
</div>
</div>
<div class="not-needed">
<div class="field">
<label for="ID_FIELD_2" class="label">Label 2</label>
<input  id="ID_FIELD_2" class="input" type="text" name="field_2" value="Value 2">
</div>
</div>
<div class="not-needed">
<div class="field">
<label for="ID_FIELD_3" class="label">Label 3</label>
<input  id="ID_FIELD_3" class="input" type="text" name="field_3" value="Value 3">
</div>
</div>
</div>

Answer 1

justify-content属性必须应用于 flex 容器，而不是它的 items.
即便如此，它也只是定义了内容项之间和周围的空间是如何分布的(参见 CSS justify-content)。

为了填充可用空间，项目元素(您的input)必须增长(例如flex-grow: 1) 或要设置的宽度(例如width: 100%)。