css - Flexbox:当行换行和/或元素包含用户输入时忽略 justify-content

Question

我引用了今天早些时候提到我的这篇关于 flexbox 的文章。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

到目前为止，flex 的行为与记录的一样，除了在下面的情况下，盒子包装它的元素和/或元素是输入/选择。这是一个例子:

#searchbar {
    border: solid 1px LightGray;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
.searchbar-control {
    display: inline !important;
    margin-bottom: 3px;
    width: 40%;
}

<div id="searchbar">
    <input type="text" class="searchbar-control" value="1">
    <input type="text" class="searchbar-control" value="2">
    <input type="text" class="searchbar-control" value="3">
    <input type="text" class="searchbar-control" value="4">
    <input type="text" class="searchbar-control" value="5">
    <input type="text" class="searchbar-control" value="6">
    <input type="text" class="searchbar-control" value="7">
    <input type="text" class="searchbar-control" value="8">
</div>

我希望该框每行包含 2 个控件。第一行的 1 和 2，第二行的 3 和 4，等等。到目前为止，还不错。但是，我发现无论使用什么值，justify-content 都会被忽略。此外，flex-wrap (nowrap/wrap) 被忽略。看起来 align-items 也被忽略了。

我在包含非用户输入元素的 flex 盒子上没有遇到过这个问题。

我希望每行显示 2 个元素，并且我希望有 3 个等宽的空间:左/中/右。

Answer 1

表单元素的宽度(尤其是当混合使用 <input> 和 <select> 时)可能有点烦躁。我发现使用 CSS 样式 box-sizing: border-box 可以帮助标准化宽度:

#searchbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: solid 1px lightgray;
}
.searchbar-control {
    box-sizing: border-box;
    margin-bottom: 3px;
    width: 40%;
}

<div id="searchbar">
    <select class="searchbar-control">
        <option value="1" selected></option>
        <option value="2" selected></option>
    </select>
    <input type="text" class="searchbar-control" value="2">
    <input type="text" class="searchbar-control" value="3">
    <select class="searchbar-control">
        <option value="3" selected></option>
        <option value="4" selected></option>
    </select>
    <input type="text" class="searchbar-control" value="5">
    <input type="text" class="searchbar-control" value="6">
    <input type="text" class="searchbar-control" value="7">
    <input type="text" class="searchbar-control" value="8">
</div>