flexbox項目擴展到全高

Question

我為兩個孩子的行設置了一個flexbox父對象。 我希望每個孩子都填滿身高的100％。 無論我嘗試什么，孩子們都會膨脹到完全相同的高度，這是內容含量最高的孩子/ div。

如何告訴孩子們填補所有可用的身高？ （或者這不可能）

我的目標是使左側子級中的文本顯示在項目的頂部，而右側子級中的文本顯示在項目的底部。 但是，當兩個項目都不高時，效果將不起作用。

Answer 1

您可以在子代上設置align-self ，以使其浮動到父容器的頂部或底部：

 body{ background-color: ivory; } #parent{ display:flex; flex-direction:row; width:400px; height:300px; border:1px solid green; } #top{align-self:flex-start; border:1px solid red;min-width:100px;} #bottom{align-self:flex-end; border: 1px solid blue;} 

 <div id=parent> <div id='top'>Hi, I have a small bit of text.</div> <div id='bottom'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div> </div>