为什么我的必须加上高度才可以实现内容撑满形成垂直居中
来源：3-16 flex布局-实例
据说真的有神
2019-09-11 17:33:59
为什么我的必须在.tabber-item里面也加上height: 100%;才可以实现内容撑满形成垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1,minimum-scale=1,
maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
<style type="text/css">
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
background-color: #e2e2e2;
color: #595b66;
}
a{
font-size: 12px;
color: #686868;
text-decoration: none;
}
li{
list-style: none;
}
body{
display: flex;
flex-direction: column; /*定义主轴在垂直方向*/
min-height: 100vh;;
}
.header{
width: 100%;
height: 50px;
background-color: rgba(222,24,27,0.9);
color: #fff;
display: flex;
justify-content: center; /*主轴居中*/
align-items: center; /*纵轴居中*/
}
.main{
flex: 1;
color: #FFFFFF;
display: flex;
}
.main-content{
flex:1;
background-color: green;
display: flex;
justify-content: center; /*主轴居中*/
align-items: center; /*纵轴居中*/
}
.main-sidebar{
order: -1;
width: 150px;
background-color: pink;
display: flex;
justify-content: center; /*主轴居中*/
align-items: center; /*纵轴居中*/
}
.tabber-container{
width: 100%;
height: 50px;
background-color: #FFFFFF;
}
.tabber{
display: flex;
height: 100%;
}
.tabber-item{
height: 100%;
flex: 1;
}
.tabber-link{
display: flex;
flex-direction: column;
height: 100%;
justify-content: center; /*主轴居中*/
align-items: center; /*纵轴居中*/
}
</style>
</head>
<body>
<header class="header">header</header>
<div class="main">
<div class="main-content">content</div>
<div class="main-sidebar">sidebar</div>
</div>
<footer class="tabber-container">
<ul class="tabber">
<li class="tabber-item tabber-item-active">
<a href="#" class="tabber-link">
<i class="iconfont icon-home"></i>
<span>首页</span>
</a>
</li>
<li class="tabber-item ">
<a href="#" class="tabber-link">
<i class="iconfont icon-category"></i>
<span>分类页</span>
</a>
</li>
<li class="tabber-item ">
<a href="#" class="tabber-link">
<i class="iconfont icon-cart"></i>
<span>购物车</span>
</a>
</li>
<li class="tabber-item ">
<a href="#" class="tabber-link">
<i class="iconfont icon-personal"></i>
<span>个人中心</span>
</a>
</li>
</ul>
</footer>
</body>
</html>
1回答
-
好帮手慕星星
2019-09-11
同学你好，
这边使用Chrome浏览器测试在.tabber-item上不添加height属性也是可以撑满垂直居中显示的哦：
自己可以再测试下，祝学习愉快！
0
相似问题