CSS媒体查询和flex实现自适应多栏布局

来源：互联网发布：天心软件编辑：程序博客网时间：2024/06/05 04:52

效果

这里写图片描述

代码

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>flexlayout</title>  <style type="text/css">    * {      margin: 0;      padding: 0;    }    body {      display: flex;      flex-direction: column;      min-height: 100vh;    }    .container {      flex: 1;      display: flex;    }    footer {      height: 40px;      background: #dddddd;    }    nav, aside {      width: 200px;      min-width: 200px;      max-width: 200px;      height: auto;      background: yellowgreen;    }    main {      flex: 1;      background: red;    }    @media (max-width: 1000px) {/*宽度不大于1000px时, 隐藏右边侧栏*/      aside {        display: none;      }    }    @media (max-width: 768px) {/*宽度不大于768px时, 排列方式改为纵向*/      .container {        flex-direction: column;      }      nav, aside {        width: 100%;        min-width: 100%;        max-width: 100%;      }      main {        height: 90vh;      }    }  </style></head><body>  <div class="container">    <nav>      <div>        <a href="#">link1</a>      </div>    </nav>    <main>      <div class="block1">        this is block1      </div>      <div class="block2">        this is block2      </div>    </main>    <aside>      <div class="side1">side1</div>      <div class="side2">side2</div>    </aside>  </div>  <footer>    copyrigtht C <a href="#">xuan</a>  </footer></body></html>

阅读全文

0 0