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

【问题标题】：Using flex-wrap on containers with width: 100%在宽度为 100% 的容器上使用 flex-wrap
【发布时间】：2020-08-18 16:06:26
【问题描述】：

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

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

【问题讨论】：

您想要的input 字段的最小宽度是多少？
@AjeetEppakayala 我认为150px 附近会很好

标签： html css forms flexbox responsive-design

【解决方案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。

【讨论】：

【解决方案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

【讨论】：