解析博客前端的flex布局
2017-03-08 本文已影响251人
起这么长的名字根本没有用
需求:
纵向三栏布局:头部、主体、尾部
1.当不出现滚动条的时候头部和尾部固定在头和底侧，主体撑开剩余高度
2.当出现滚动条的时候尾部跟在主体后面被撑下去
。
实现目标：
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏纵向布局</title>
<style>
html{
background: silver;
height: 100%;
}
body{
margin:0;
height: 100%;
}
#wrap{
display: flex;
flex-direction: column;
height: 100%;
}
header,footer{
flex:0 0 100px;
}
header{
background: red;
}
footer{
background: blue;
}
.main{
flex:1 0 auto;
background: orange;
}
</style>
</head>
<body>
<div id="wrap">
<header>
我是头部啊
</header>
<div class="main">
我是主体，我最牛逼,我高度能自适应，我能把footer带跑偏
改变我的内容，我高度就自适应了
</div>
<footer>我是尾部</footer>
</div>
</body>
</html>
程序说明:
- 现将
html和body以及主体div元素的高度设置成100%;让高度撑满真个屏幕; - 将
主体div元素的display设置成flex,然后flex-direction属性设置成column； - 将
footer和header的flex属性设置成0 0 100px,表明不管是否有剩余空间，还是剩余空间不足，我的高度都固定在100px； - 将
主体div的flex属性设置成1 0 auto,当最后一个属性值是auto的时候表明他的主轴宽度取决于第一个属性flex-grow,也就是有剩余空间的时候，占满剩余空间；中间设置成0表明，剩余空间不够的时候主轴宽度也不压缩。 - 大功告成，改变主体
div的高度吧！
注意:
这是一个flex布局的实战；如果不懂flex布局，请看
一个完整的Flexbox指南
理解Flexbox：你需要知道的一切
