flex实现子元素垂直等分父元素高度

来源：网络文章列表 2019-01-09 8

使用flex:1或者flex:auto实现将容器的高度均等分。

今日需要做一个排行榜。由于屏幕高度不确定，且取的数据条数不确定，又不想写JS实现，就用flex布局实现了。在实现的过程中还是遇到了一个坑的。废话不多说，开始撸代码！

假设我们有一个父DIV，div里有3个p标签，我们想均分浏览器窗口的高度。如果对flex布局不清楚的童鞋，请先看这篇文章。flexbox弹性伸缩盒布局教程

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
	* { padding: 0; margin: 0;  box-sizing: border-box; }
    /* 以下代码就起作用了，正常情况下下面代码就能实现均分垂直高度。 */
	.test{display: flex; flex-direction: column; background: #bbb; }
	.test p{width: 100%; border: 1px solid #ccc; flex: 1;  }
	</style>
</head>
<body>
  <div class="test">
    <p>1</p>
    <p>2</p>
    <p>3</p>
  </div>
</body>
</html>

代码的效果如下：

我们发现，和我们的预期不一样。我们的预期是1，2，3 这3个p标签，均分窗口的高度。

然后我们检查代码，父元素设置 display: flex; 为弹性盒模型， flex-direction: column; 设置元素为垂直显示。没毛病。

子元素设置 flex: auto; 或者 flex: 1。即等于flex-grow: 1; flex-shrink: 1;flex-basis:auto; （flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选）

那问题出在那里呢

经过不断测试发现，是父元素缺少高度的原因。你只需要给父元素一个高度，比如height:500px;

但是我们这个例子中想纯css实现，那怎么办呢，其实很简单，稍微修改下我们的代码就可以了。请看代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
	* { padding: 0; margin: 0;  box-sizing: border-box; }
    /* 设置html,body的高度，和父元素的高度即可了 */
	html,body{ height: 100%; } 
	.test{ height: calc(100%); display: flex;flex-direction: column; background: #bbb;}
	.test p{flex: auto; border: 1px solid #ccc;  }
	</style>
</head>
<body>
  <div class="test">
    <p>1</p>
    <p>2</p>
    <p>3</p>
  </div>
</body>
</html>