案例一 左右宽度固定 中间自适应
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wrap {
display: flex;
height: 100vh;
}
.l,.r {
flex: 0 0 200px;
background: #f4f4f4
}
.c {
flex: 1
}
</style>
<div class="wrap">
<div class="l">1</div>
<div class="c">2</div>
<div class="r">3</div>
</div>
案例二 垂直居中
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wrap {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
</style>
<div class="wrap">
<div>垂直居中</div>
</div>
案例三 左边定宽 右边自适应
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wrap {
display: flex;
height: 100vh;
}
.l {
flex: 0 0 200px;
background: #f4f4f4;
}
.r {
flex: 1;
}
</style>
<div class="wrap">
<div class="l"></div>
<div class="r"></div>
</div>
案例四 多列等分布局
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wrap {
display: flex;
height: 100vh;
}
.l {
background: red;
}
.c {
background: #2577e3;
}
.r {
background: #f60;
}
.l,.r,.c {
flex: 1;
}
</style>
<div class="wrap">
<div class="l"></div>
<div class="c"></div>
<div class="r"></div>
</div>
