html - 表单中的 CSS Flexbox

<分区>

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

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

以下是我到目前为止的工作(已简化以在此处发布)。我使用 fieldset 作为 flex parent，每个应该并排“增长”的表单元素都被封装在一个 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 并允许它们缩放以填充父级的宽度？

最佳答案

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

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

这里有两件事:

当您对一个元素执行 display:flex 时，每个直接子元素都会受到影响。因此，在您的示例中(如果它有效)图例也将显示在同一行上。
无论出于何种原因，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%;
}

关于html - 表单中的 CSS Flexbox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27369754/

上一篇：javascript - 谷歌分析如何检测用户离开页面？

下一篇：JavaScript onClick 添加类

相关文章：

html - 垂直 Bootstrap 面板标题

html - 使用 margin-left,right : auto 减小宽度尺寸

css - 元素 <tr> 未缩放到容器

javascript - 为什么不执行跨源政策？

html - 为页脚中的 4 个 div 设置响应式布局。需要相对于页脚边缘的所有边保持居中

html - Angular Material 2 : Sidenav has no backdrop

javascript - html改变div内容

css - 将第一个列表项 float 到左侧，其余列表项 float 到右侧(使用 flexbox)

html - flex 属性在 IE 中不起作用

java - 如何从 Controller 以可接受的格式向 Highstock 发送数据？