flex弹性盒布局示例

刚学习弹性盒布局，实现下面的页面规划（故意弄复杂点看看如何实现）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>

      .myscreen {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        text-align: center;
      }

      topinfo {
        height: 50px;
        background:red;
      }

      header,
      footer {
        height: 60px;
        background:#aaa;
      }

      .main {
        display: flex;
        flex: 1;
      }

      .content {
        flex: 1;
        background: #ccc;
      }

      
      .a,.b{
        display: flex;
        height: 50%;
      }

      .a {
        background: chartreuse;
        display: flex;
        flex-direction: row;
      }
      .a1{
        background: darkmagenta;
      }
      .a2{
        background:darkorange;
      }
      .a1,.a2{
        height: 100%;
        width: 50%;
      }

      .b {
        background: cyan;
      }


      .nav,
      .ads {
        /* 两个边栏的宽度设为12em */
        flex: 0 0 12em;
      }

      .ads {
        background: yellow;
      }

      .nav {
        /* 导航放到最左边 */
        order: -1;
        background: red;
      }
    </style>
  </head>
  <body class="myscreen">
    <topinfo>topinfo</topinfo>
    <header>header</header>
    <div class="main">
      <nav class="nav">nav</nav>
      <main class="content">
        <div class="a">
          <div class="a1">a1</div>
          <div class="a2">a2</div>
        </div>
        <div class="b">b</div>
      </main>
      <aside class="ads">aside</aside>
    </div>
    <footer>footer</footer>
  </body>
</html>

posted on 2021-09-28 16:10 garfieldtom 阅读(118) 评论(0) 编辑收藏举报