Html 表单中的 CSS Flexbox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27369754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Flexbox in a Form
提问by Woodrow Barlow
I want to use the flex display property on my web form in order to have two text fields side-by side and automatically growing to fill the space. I chose to use flex over a table layout because I want them to move to their own line when the window shrinks.
我想在我的 web 表单上使用 flex display 属性，以便有两个文本字段并排并自动增长以填充空间。我选择在表格布局上使用 flex，因为我希望它们在窗口缩小时移动到自己的行。
I believe I am misunderstanding how to use flexbox.
我相信我误解了如何使用 flexbox。
Below is my work so far (simplified for posting here). I am using a fieldset as a flex parent, and each form element which should "grow" side-by-side is encased in a div (set to display: inlineso they can be on the same line). I also have a legend for the fieldset, set to display:blockand width:100%so that it will be on its own line.
以下是我迄今为止的工作（为了在此处发布而进行了简化）。我使用一个字段集作为 flex 父级，并且每个应该并排“增长”的表单元素都包含在一个 div 中（设置为display: inline以便它们可以在同一行上）。我也有一个字段集的图例，设置为display:blockandwidth:100%以便它将在自己的行上。
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>As you can see, the divs are each on their own line (despite the display: inlineand flexbox stuff). If you add a border to the div elements, you'll see that they are 100% width right now; but even if you manually define a width (like 30%), they remain on their own lines.
正如你所看到的，每个 div 都在自己的行上（尽管有display: inlineflexbox 的东西）。如果你给 div 元素添加边框，你会看到它们现在是 100% 宽度；但即使您手动定义宽度（如 30%），它们仍会保留在自己的行上。
How can I use flex to display the divs side-by-side and allow them to scale to fill the parent's width?
如何使用 flex 并排显示 div 并允许它们缩放以填充父级的宽度？
回答by ratherblue
Two things here:
这里有两件事：
1) When you do display: flexon an element, every single direct child is affected. So in your example (if it were working) the legend will also be displayed on the same line.
1) 当您display: flex对一个元素执行操作时，每个直接子元素都会受到影响。因此，在您的示例中（如果它有效），图例也将显示在同一行上。
2) For whatever reason, fieldsetdoesn't like to play nicely with flexbox. since you don't want the legend to be on the same line anyway, I would suggest specifically wrapping the elements you want to be on the same line.
2）无论出于何种原因，fieldset不喜欢很好地使用 flexbox。由于您无论如何都不希望图例在同一行上，因此我建议特别将您想要在同一行上的元素包装起来。
EDIT: This bug has been fixed in Firefox and Chrome:
编辑：此错误已在 Firefox 和 Chrome 中修复：
https://bugzilla.mozilla.org/show_bug.cgi?id=1230207
https://bugs.chromium.org/p/chromium/issues/detail?id=262679
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%;
}
