CSS之经典flex布局——头部底部固定，中间部分自适应高度

最新推荐文章于 2024-02-08 09:27:17 发布

bossxu_

最新推荐文章于 2024-02-08 09:27:17 发布

阅读量3.6k

点赞数 1

分类专栏： web前端开发文章标签： flex布局 flex上中下布局 flex左中右布局 flex自适应布局 css flex布局

本文链接：https://blog.csdn.net/bossxu_/article/details/118937989

版权

web前端开发专栏收录该内容

51 篇文章 2 订阅

订阅专栏

1.外部盒模型 flex ，子元素竖向排列；给顶部和底部元素固定高度；中间元素 flex-grow: 1;
2.中间元素左右固定,中间自适应；左右元素固定宽度；中间元素flex:1

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>flex 经典布局</title>
    <style>
        html ,body{
          height: 100%;
          margin: 0;
        }
       .main {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
        }
        .content {
          flex-grow: 1;
          display: flex
        }
        .header,.footer {
        width: 100%;
        height: 100px;
        background: blanchedalmond;
        }
        .left ,.right{
            width:200px;
            height: 100%;
            background-color: #29bd63;            
        }
        .center {
          flex: 1;
          background-color: #94fa1a
        }
  </style>
</head>

<body>
  <div class='main'>
    <div class='header'></div>
    <div class='content'>
      <div class='left'></div>
      <div class='center'></div>
      <div class='right'></div>
    </div>
    <div class='footer'></div>
  </div>
</body>

在这里插入图片描述