如何在flexitem中对TEXTAREA和TEXT输入控件进行顶部对齐?

时间:2017-08-16 20:14:51

标签: html css css3 flexbox

首先,我使用flex:属性在调整浏览器窗口大小时使两个相邻的flexitems增长和缩小。那很有效。

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

在textarea旁边添加了单行TEXT输入元素,并观察到文本输入元素的底线与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>

1 个答案:

答案 0 :(得分:0)

您可以通过使.bs3 flex并对齐其项目来实现此目的。

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