使用 flexbox 进行输入字段换行答案

【问题标题】：Input field wrapping using flexbox使用 flexbox 进行输入字段换行
【发布时间】：2020-10-19 07:33:48
【问题描述】：

我是 flexbox 的新手，我尝试创建一个如下图所示的输入表单。首先，两个字段应该是 div 宽度的 50%，另外两个是 100% 宽度。在移动视图中，它们应该相互堆叠。我可以在 textarea 上使用“width”和“height”属性吗？

.form{
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.input-flex{
  max-width: 600px;

}

input, textarea{
  border: 0;
  border-radius: 6px;
  padding: 2%;
  background-color: darkgray;
  margin-right: 5%;
  margin-bottom: 5%;
  flex:1 0 100%;
}

<div class="form">
  <div class="input-flex">
    <input type="text" name="name" placeholder="Name*"/>       
    <input type="email" name="email" placeholder="E-mail*"/>
    <input type="tel" name="number" placeholder="Phone number*"/>
    <textarea cols="55" rows="15" placeholder="Questions"></textarea>
  </div>  
</div>

【问题讨论】：

附带说明：占位符不能替代标签。你真的应该研究语义 HTML

标签： html css flexbox

【解决方案1】：

请注意，您将 .form 定义为 flex 父级，即使您的元素在 .input-flex 内 - 所以我只是将样式复制到此元素。

关于您的问题：通过使用专用类，您可以指定哪些元素应具有 100% 宽度。

除此之外，我将margin 更改为在所有元素周围保持不变，因此结果更符合设计。

.form {
  width: 100%;
}

.input-flex {
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  align-items: center;
}

input,
textarea {
  border: 0;
  border-radius: 6px;
  padding: 2%;
  background-color: darkgray;
  margin: 10px;
  box-sizing: border-box;
  flex-grow: 1;
}

.full-width {
  width: 100%;
}

<div class="form">
  <div class="input-flex">
    <input type="text" name="name" placeholder="Name*" />
    <input type="email" name="email" placeholder="E-mail*" />
    <input type="tel" class="full-width" name="number" placeholder="Phone number*" />
    <textarea cols="55" rows="15" class="full-width" placeholder="Questions"></textarea>
  </div>
</div>

【讨论】：