常用布局
三栏布局
双边固定,中间自适应
CSS:
.container{
display:flex;
}
.left{
width:100px;
height:200px;
}
.main{
height:200px;
width:100%;
}
.right{
width: 100px;
height: 200px;
}
HTML:
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
column布局,三行布局,中间自适应
CSS:
.container{
display:flex;
flex-direction:column;
height:700px;
}
.top{
width:100px;
height:200px;
}
.main{
height:100%;
width:100px;
}
.bottom{
width: 100px;
height: 200px;
}
HTML:
<div class="container">
<div class="top"></div>
<div class="main"></div>
<div class="bottom"></div>
</div>
