中间的高度为啥没有自动撑开呢？
来源：3-16 flex布局-实例
慕函数4234673
2020-04-07 09:07:43
<!DOCTYPE html>
<html>
<head>
<title>flex布局</title>
<style type="text/css">
header{
width: 100%;
background: gray;
display: flex;
justify-content: center;
align-self: center;
height: 60px;
}
header>p{
color:lightblue;
font-size: 18px;
}
.contents{
width: 100%;
display: flex;
}
.aside{
width: 30%;
background: lightyellow;
display: flex;
justify-content: center;
align-self: center;
}
.side{
flex: 1;
background:red;
display: flex;
justify-content: center;
align-self: center;
}
footer{
width: 100%;
height: 80px;
background-color:lightgreen;
display: flex;
justify-content:space-around;
}
footer>p{
width: 80px;
display:flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
</style>
</head>
<body>
<header>
<p>我是首页</p>
</header>
<div class="contents">
<div class="aside">侧边栏</div>
<div class="side">整体</div>
</div>
<footer>
<p><i>></i>首页</p>
<p><i>></i>开发中心</p>
<p><i>></i>版权</p>
</footer>
</body>
</html>
1回答
-
好帮手慕粉
2020-04-07
同学你好，容器的高度是由内容撑开的，内容有多高，容器就有多高。同学可以给其设置高度：
祝学习愉快~
0
相似问题