html - 如何在 flexitem 中顶部对齐 TEXTAREA 和 TEXT-input 控件？

Question

首先，我使用 flex: 属性使两个相邻的 flex 元素在浏览器窗口调整大小时变大和变小。那奏效了。

然后我将一个 TEXTAEA 元素放入第二个动态 flexitem 中。效果很好。

在textarea旁边添加了一个单行的TEXT input元素，观察到text input元素的底线与textarea的底线对齐，但我希望两个元素的顶线对齐。如果不只使用 CSS 编写脚本，我该如何做到这一点？

.parent {
  display: flex;
  background-color: yellow;
}

.verttop {
  align-items: flex-start;
}

.dimen {
  height: 50px;
  width: 50px;
}

.placeholder {
  background-color: khaki;
  width: 300px;
}

.bs1 {
  background-color: green;
  width: 20px;
}

.bs2 {
  flex: 1 1 auto;
  background-color: cyan;
}

.bs3 {
  flex: 1 1 auto;
  background-color: red;
}

.bs4 {
  background-color: gray;
  width: 100px;
}

<div class="parent">
  <div class="placeholder dimen"></div>
  <div class="bs1 dimen"></div>
  <div class="bs2 dimen"></div>
  <div class="bs3">
    <textarea rows="10" cols="18">This is a fairly     lengthy and annoyingly meaningless sentence.
          </textarea>
    <input class="verttop" type="text" value="Hello">
  </div>
  <div class="bs4 dimen"></div>
</div>

Answer 1

您可以通过使 .bs3 flex 并对齐其元素来做到这一点。

.bs3 {
  flex: 1 1 auto;
  background-color: red;
  display: flex;
  align-items: flex-start;
}