如何使用Flex创建高度不相等的并排两栏布局？

这事儿其实是flex布局的默认特性在起作用～当你用display: flex创建容器时，默认的align-items属性值是stretch，它会强制所有flex子项拉伸到和容器里最高的那个子项一样高，所以哪怕红色栏内容少，也会被拉得和蓝色栏一样高。

要让红色栏的高度完全由内部内容决定，只需要给flex容器加一行关键代码：

.column-layout{ 
  display: flex;
  align-items: flex-start; /* 让子项按自身内容高度对齐，不再强制拉伸 */
}
.one{ background-color: blue; flex: 3; }
.two{ background-color: red; flex: 1; }

对应的HTML结构保持不变：

<div class='column-layout'>
 <div class='one'>
 <p>Hello</p>
 <p>Hello</p>
 <p>Hello</p>
 <p>Hello</p>
 <p>Hello</p>
 <p>Hello</p>
 <p>Hello</p>
 <p>Hello</p>
 </div>
 <div class='two'>
 <p>Hello</p>
 <p>Hello</p>
 <p>Hello</p>
 </div>
</div>

简单解释下：align-items: flex-start会让所有flex子项沿着垂直方向的顶部对齐，各自的高度就由内部的内容来决定，不会再被强制拉伸到最高子项的高度啦。

内容的提问来源于stack exchange，提问作者Onyx