flex布局实现上下固定，中间自适应

最新推荐文章于 2024-05-22 11:25:02 发布

刘依铭

最新推荐文章于 2024-05-22 11:25:02 发布

阅读量1.7k

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_64105376/article/details/126495168

版权

本文介绍了如何使用CSS实现竖版的三栏布局。通过设置父亲元素为flex布局，调整主轴方向，并结合absolute定位，实现了顶部、底部固定，中间自适应的布局效果。示例代码中详细展示了样式设置，适用于前端开发中的布局设计。

摘要由CSDN通过智能技术生成

 <div class="father">
    <div class="son1"></div>
    <div class="son2"></div>
    <div class="son3"></div>
  </div>

 .father {
    width: 200px;
    height: 500px;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: cyan;
  }

  .son1 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100px;
    background-color: brown;
  }
  .son2 {
    flex:1;
    background-color: burlywood;
  }
  .son3 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: chartreuse;
  }

实现的主要方法就是通过给父盒子添加flex布局，并掉转主轴方向，上下定位固定好位置，中间flex：1，进行自适应，其实就是竖版的三栏布局，可以看卡我之前写得两栏布局和三栏布局