如何頂部對齊flexitem中的TEXTAREA和TEXT輸入控件？

Question

首先，我使用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>

Answer 1

您可以通過.bs3 Flex和調整其項目做到這一點。

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