flexbox项目扩展到全高

Question

我有一个flexbox父集，用于包含2个子节点的行。我希望每个孩子都能达到100％的身高。无论我尝试什么，孩子们都会扩展到完全相同的高度，即具有最高内容的child / 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>