表单中的CSS Flexbox

Question

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

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

以下是我目前的工作(简化发布在这里).我使用一个字段集作为一个flex父,并且每个应该并排"增长"的表单元素都被包含在div中(设置为display: inline可以在同一行上).我也有一个关于fieldset的图例,设置为display:block并且width:100%它将在它自己的行上.

jsFiddle链接

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

这里有两件事:

1)当你display: flex对元素进行操作时,每个直接的孩子都会受到影响.因此,在您的示例中(如果它正在工作),图例也将显示在同一行上.

2)无论出于何种原因,fieldset不喜欢与flexbox一起玩得很好.既然你不想让图例在同一条线上,我建议你专门将你想要的元素包装在同一条线上.

编辑:此错误已在Firefox和Chrome中修复:

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

<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%;
}