Question

我有以下问题，我在flex-wrap中有输入的表单，但是在少数表单中我有<textarea rows="5"></textarea>并且它比输入字段需要更多的高度。是否可以在flex-wrap中包含以下结构：

将这2个输入字段放在另一个下面，但在它们的.holder div中？

CSS: 
.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.holder {
  width: 30%;
}

input, textarea {
  width: 100%;
}

.holder.textarea {
  width: 65%;
}

HTML: 

<div class="flex">
  <div class="holder textarea">
      <textarea name="test" rows="5"></textarea>
  </div>
  <div class="holder">
    <input type="text">
  </div>
  <div class="holder">
    <input type="text">
  </div>
</div>

Answer 1

我并不是100％肯定你要求的＆amp;由于缺乏声誉，我无法发表评论，因此我无法在答案中做出猜测。

所以你想要一个类似的布局吗？

-TextArea-
-Input-
-Input-

您可以将display: block和width: 100%应用于.holder课程，然后通过相关的CSS课程调整输入控件的大小。

如果我完全误解了你想要实现的目标，请发表评论，我会看看能不能帮助你：）

编辑：

在阅读您最近的评论后，我可以提供另一种解决方案。但是，它并没有使用flex。

＆＃13;

.block {
  width: 100%:
  display: block;
}

.textarea {
  display: inline-block;
  width: 30%;
}

.textarea textarea {
  width: 100%;
}

.holder {
  display: inline-block;
  vertical-align: top;
}

.holder input {
  display: block;
  vertical-align: top;
}

＆＃13;

<div class="block">
  <div class="textarea">
      <textarea class="textarea" name="test" rows="5"></textarea>
  </div>
  <div class="holder">
    <input type="text">
    <input type="text">
</div>

＆＃13;

Answer 2

你可以看到..你想这样吗？我尝试过多布局css。通过column-count

.flex {
  column-count: 2;
  column-gap: 0;
}

.holder {
  width: 50%;
  margin-bottom: 15px;
}

input, textarea {
  width: 100%;
}

.holder.textarea {
  width: 65%;
  margin-bottom: 0;
}

<div class="flex">
  <div class="holder textarea">
      <textarea name="test" rows="5"></textarea>
  </div>
  <div class="holder">
    <input type="text">
  </div>
  <div class="holder">
    <input type="text">
  </div>
</div>

当可用空间Flexbox时，在另一个下添加项目

2 个答案: