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＆amp;第一排2，3＆amp; 4，第二排等。到目前为止，这么好。但是，我发现无论使用什么值，都会忽略justify-content。此外，忽略flex-wrap（nowrap / wrap）。看起来对齐项也会被忽略。

我没有在带有不用户输入元素的弹性框上遇到此问题。

我希望每行看到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>

Flexbox：当行换行和/或项目由用户输入组成时，忽略了对齐内容

1 个答案: