利用flex完成圣杯布局
2017-07-12 本文已影响78人
鸭梨山大哎
基本思路
1首先完成header，footer，main的布局。
利用flex-direction: column;完成上述内容的竖向布局。
2.之后再完成main之内的三部分的布局。
这个是横向布局
3 重点理解一下flex：1的意思。如果某个元素flex：1且没有设置宽度，则该元素占满空间。
4body是header，footer，main的容器，body中的display:flex;控制header，footer，main的布局。
main是left，right，content的容器，main中的display:flex;控制left，right，content的布局不要混淆。
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
display:flex;/* 头、中部、脚纵向显示 */
flex-direction: column;/* 头、中部、脚纵向显示 */
}
header,footer {
flex:0 0 50px;/* 头、脚尺寸固定，不放大、不缩小 50px指的是高度*/
background: pink;
}
#main {
display:flex;/*control content left right*/
flex:1; /* flex:1指的是等分，但是由于是纵向排列，所以实际上就是自己占满中部空间*/
}
#content {
background: palegoldenrod;
flex:1;/*content没设置宽度，没设置宽度就默认全屏宽度。
flex:1指的是等分，但是由于是纵向排列，所以实际上就是自己占满中部空间 */
}
#left,#right{
background: paleturquoise;
flex:0 0 100px;/*设置left和right的宽度为100px，第一个参数0表示不扩张，第二个0表示不收缩 */
}
#left {
order:-1;/*设置left的位置为最左边 */
}
</style>
<body>
<header></header>
<div id="main">
<div id="content"></div>
<div id="left"></div>
<div id="right"></div>
</div>
<footer></footer>
</body>
结果如图
image.png
