网页布局神器flex，帮你实现完美的布局，适应任何分辨率的屏幕
经常有这样的需求，一般首页有三部分组成：头部导航、中间内容区域、底部公司信息，希望这三部分刚才充满屏幕，不多不少，传统的布局是使用百分比，如20%、60%，70%，但是百分比不能很好地适应分辨率，比如pc屏幕高度为1200px、笔记本的屏幕高度900px，那么使用百分比的话，头部20%在两个设备的高度分别为240px、180px，显然差别太大，看着太丑陋，我希望头部高度固定未100px、底部固定未120px，剩余的高度由屏幕自己计算留给中间区域，这样的需求怎么实现呢？其实就是本文讲的flex
三部分，head、main、footer，父容器为wrap，需要得到剩余所有高度的div需要设置flex:1;
请仔细看备注
代码实现如下
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{
height: 100%;
}
body {
margin:0;
padding:0;
height: 100%;
}
.wrap{
display: flex; /*此为关键地方，父容器设置flex*/
flex-direction: column; /*此为关键地方*/
height: 100%;/*此为关键地方，父容器高度一定要明确*/
}
.head{
border:1px dashed green;
height: 20px;
}
.main{
flex:1; /*此为关键地方，将得到剩余所有高度*/
border:1px dashed blue;
overflow: auto;
}
.footer{
border:1px dashed red;
height: 50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="head">
<a th:attr ="userid=${sender}" id="send" th:text="${sender}"> </a>
</div>
<div class="main">
</div>
<div class="footer">
<input type="text" id="reciver" style="width: 60px;margin-left: 2px;" placeholder="输入好友" />
<input type="text" id="message" value="hello !!!"/>
<input type="button" onclick="send()" value="发送"/>
</div>
</div>
</body>
</html>运行效果如下：