<head><meta charset="utf-8"><title>两栏布局-flex</title><style> .warp{ display:flex; } .left { width: 300px; background-color: pink; height:500px; } .right { background-color: aquamarine; height:500px; flex:1}</style></head><body> <div class="warp"> <div class="left">定宽</div> <div class="right">自适应</div> </div></body>复制代码
3.3三栏布局
什么是三栏布局
左右固定，中间自适应
中间栏放在文档流前面，保证优先加载。
实现方案有三种：flex布局、圣杯布局、双飞翼布局
圣杯起源于a list part的一篇文章，双飞翼起源于淘宝UED，灵感来源于页面渲染。
flex实现
将中间盒子放置html最开始，保证优先加载
使用flex order属性决定三个盒子顺序，左，中，右
左盒子和右盒子固定宽度，中间盒子flex:1
<!DOCTYPE html><html><head><meta charset="utf-8"><title>flex布局</title><style> *{ margin: 0; padding: 0; } .box{ min-width: 800px; height: 600px; background: gray; display: flex; } .left{ width:200px; height: 600px; background: pink; order:-1 } .center{ height: 600px; background: aquamarine; width:100%; flex:1 order:1 } .right{ width:200px; height: 600px; background: skyblue; order:2 }</style></head><body><div class="box"> <div class="center">中哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈中</div> <div class="left">左</div> <div class="right">右</div> </div></body></html>复制代码
3.4等高布局
等高布局是指子元素在父元素中高度相等的布局方式。
flex实现
实现原理：align-items默认值为strech,表示纵向拉伸 flex 项目以填充容器
<!DOCTYPE html><html><head><meta charset="utf-8"><title>等高布局-flex布局</title><style type="text/css"> *{ margin:0; padding:0; } .center, .left, .right { text-align:center; background-color:aquamarine; flex:1 } .container { display:flex; /* flex-direction: row; */ width:1200px; margin:0 auto; }</style></head><body> <div class="container"> <div class="left">111111111111</div> <div class="center">22222222222222222222222222</div> <div class="right"> 333333333333333333333333333333333333333333333333 333333333333333333333333333333333333333333333333 333333333333333333333333333333333333333333333333 </div></div></body></html>复制代码
3.5粘带布局
当main的高度足够长的时候，footer会跟在其后面。当main元素比较短的时候(比如小于屏幕宽度)，footer元素能够粘带在屏幕底部。
<html><head><meta charset="UTF-8"><title>粘带布局-flex</title><style> html, body { margin: 0; padding:0; text-align:center;} #wrap{ height:100%; display: flex; flex-direction: column; } #main{ background-color: pink; flex:1; } #footer{ background-color: aquamarine; height: 30px; }</style></head><body> <div id="wrap"> <div id="main"> <p>main</p> <p>main</p> </div> <div id="footer">footer</div> </div></body></html>
本文地址：百科问答频道 https://www.neebe.cn/wenda/937947_2.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
