CSS 场景题----布局

好记性不如烂笔头

2024-06-30 105 阅读1分钟

左右布局

左边固定，右边自适应

<div class="main">
  <div class="left">左边</div>
  <div class="right">右边</div>
</div>

.main{
  display:flex
}
.left{
  flex:0 0 200px;
}
.right{
  flex:1
}

三栏布局

左右固定(宽度)，中间自适应

<div class="main">
  <div class="left">左边</div>
  <div class="middle">中间</div>
  <div class="right">右边</div>
</div>

.main{
  display:flex
}
.left .right{
  flex:0 0 200px;
}
.middle{
  flex:1
}

上中下布局(上下固定高度，中间自适应)

<div class="main">
  <div class="header">上</div>
  <div class="middle">中间</div>
  <div class="footer">下</div>
</div>

.main{
  display:flex;
  flex-direction:column;
}
.header{
  flex:0 0 auto;
}
.middle{
  flex:1
}
.footer{
  flex:0 0 auto;
}

粘连布局

当内容区域没有超出视口高度时，footer紧贴在网页底部
当内容区域超出视口高度时，footer紧跟内容区域底部，正常布局

<body>
  <div class="content">内容</div>
  <div class="footer"></div>
</body>
body{
 margin:0;
 padding:0
}
body{
 display:flex
 flex-direction:column
}
.content{
  flex:1
}
.footer{
 flex:0 0  50px
}