表单中的 CSS Flexbox [重复]

Question

我想在我的 Web 表单上使用 flex display 属性，以便让两个文本字段并排并自动增长以填充空间。我选择在表格布局上使用 flex，因为我希望它们在窗口缩小时移动到自己的行。

我相信我误解了如何使用 flexbox。

以下是我到目前为止的工作（为在此处发布而进行了简化）。我使用一个字段集作为 flex 父级，并且每个应该并排“增长”的表单元素都封装在一个 div 中（设置为display: inline，因此它们可以在同一行）。我还有一个字段集的图例，设置为display:block 和width:100%，这样它就可以单独一行了。

jsFiddle link

fieldset {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: none;
}

label {
    display: none;
}

legend {
    display: block;
    width: 100%;
}

fieldset > div {
    display: inline;
    flex: 1 1 auto;
}

input {
    width: 100%;
}

<form>
    <fieldset>
        <legend>These are Text Fields</legend>
        <div>
            <input type="text" id="text1">
            <label for="text1">Text Field</label>
        </div>
        <div>
            <input type="text" id="text2">
            <label for="text2">More Text</label>
        </div>
    </fieldset>
</form>

如您所见，每个 div 都在自己的行中（尽管有 display: inline 和 flexbox 的东西）。如果为 div 元素添加边框，您会看到它们现在是 100% 宽度；但即使您手动定义宽度（例如 30%），它们也会保持在自己的行上。

如何使用 flex 并排显示 div 并允许它们缩放以填充父级的宽度？

Answer 1

编辑：此错误已在 Firefox 和 Chrome 中修复。最初发布在问题中的示例现在可以按预期工作。

https://bugzilla.mozilla.org/show_bug.cgi?id=1230207
https://bugs.chromium.org/p/chromium/issues/detail?id=375693

---

这里有两件事：

1. 当您对元素执行display: flex 时，每个直接子元素都会受到影响。因此，在您的示例中（如果它正常工作），图例也将显示在同一行。

2. 无论出于何种原因，fieldset 都不喜欢与 flexbox 完美搭配。由于您不希望图例位于同一行，因此我建议专门将您希望位于同一行的元素包装起来。

<form>
    <fieldset>
        <legend>These are Text Fields</legend>
        <div class="flex-wrapper">
            <div>
                <input type="text" id="text1">
                <label for="text1">Text Field</label>
            </div>
            <div>
                <input type="text" id="text2">
                <label for="text2">More Text</label>
            </div>
        </div>
    </fieldset>
</form>

fieldset {
    border: none;
}

.flex-wrapper {
 
    display: flex;
    flex-direction: row;
    justify-content: space-between;   
    align-items: stretch;
}

.flex-wrapper > div {
    flex: 1 1 auto;
}

label {
    display: none;
}

legend {
    display: block;
    width: 100%;
}

input {
    width: 100%;
}