在宽度为 100% 的容器上使用 flex-wrap

Question

我正在尝试创建一个包含 name 和 lastname 输入的表单。我希望我的输入是内联的，并且还水平地占据可用 space 的 100%，并且当没有足够的 space 时它们会换行。你可以在这个 jsfiddle https://jsfiddle.net/sbfm9ygo/22/ 中看到这个工作正常（输入是内联的，当你缩小屏幕时它们会自动换行）。

我可以使用 flex-wrap 属性但仅当我的元素的宽度不是 100% 时使用 flexbox 来实现这一点。在 jsfiddle 中，如果您取消注释 width: 100%，您会注意到这不再有效。我怎样才能实现 jsfiddle 上显示的功能，同时让我的元素占用 100% 的可用 space？我正在尝试不使用媒体查询来执行此操作。

Answer 1

您可以使用 flex-grow: 1; 而不是 width: 100% 来修复它：

.form-container {
  display: flex;
  flex-wrap: wrap;
}

.form-container div {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 1rem;
}

<div class="form-container">

  <div>
    <label>Label1</label>
    <input value="input1" />
  </div>

  <div>
    <label>Label2</label>
    <input value="input2" />
  </div>

</div>

检查jsfiddle。

Answer 2

flex：1 会将它们平分，min-width: 150px; 会阻止 input 变得更小

.form-container {
  display: flex;
  flex-wrap: wrap; 
}

.form-container div {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  margin: 1rem;
}

<div class="form-container">

  <div>
    <label >Label1</label>
    <input value="input1"/>
  </div>

  <div>
    <label >Label2</label>
    <input value="input2"/>
  </div>

</div>

JSFiddle

在宽度为 100% 的容器上使用 flex-wrap

Using flex-wrap on containers with width: 100%

html

css

forms

flexbox

responsive-design