css布局技巧，css常见布局汇总

<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三栏布局

什么是三栏布局

左右固定，中间自适应
中间栏放在文档流前面，保证优先加载。

css布局技巧，css常见布局汇总

实现方案有三种：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等高布局

等高布局是指子元素在父元素中高度相等的布局方式。

css布局技巧，css常见布局汇总

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元素能够粘带在屏幕底部。

css布局技巧，css常见布局汇总

<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>

css布局技巧，css常见布局汇总