flex PC端布局 - - php.cn博客

   <style>
      *,
      ::before,
      ::after {
        margin: 0px; /*清除外边距*/
        padding: 0px; /*清除内边距*/
        box-sizing: border-box; /*将盒子换为IE盒子 边框和内边距将不占据盒子大小*/
      }
      .box {
        display: flex; /*将最大的容器转换弹性盒子*/
        flex-flow: column nowrap; /*主轴为垂直排列 不换行*/
        background-color: #f3f5f7; /*背景颜色*/
      }
      /*导航*/
      header {
        background-color: #000; /*导航背景颜色*/
        height: 3em; /*高度*/
        display: flex; /*将导航父容器转换为弹性盒子*/
        flex-flow: row; /*主轴方向横向排列 */
        align-items: center; /*交叉轴垂直居中*/
      }
      header > a {
        text-decoration: none; /*去掉a标签的下划线*/
        color: rgba(255, 255, 255, 0.7); /*字体颜色*/
        flex: 1; /*项目自动分配宽度*/
        text-align: center; /*文本居中*/
      }
      /*主体*/
      .box > .container {
        margin-top: 2em; /*主体盒子上外边距*/
        display: flex; /*将主体转换弹性盒子*/
        border: 1px solid; /*边框线*/
        min-height: 40em; /*最小高度*/
        justify-content: center; /*主轴对齐方式*/
      }
      .container div {
        border: 1px solid;
      }
      .container div:first-of-type {
        flex: 0 0 20%;
      } /*主体内容里面的第一个项目占20%*/
      .container div:nth-of-type(2) {
        flex: 0 0 40%;
      } /*主体内容里面的第二个项目占40%*/
      .container div:last-of-type {
        flex: 0 0 20%;
      } /*主体内容里面的最后一个项目占20%*/
      /*底部*/
      footer {
        margin-top: 1em; /*底部盒子上外边距*/
        display: flex; /*将容器转换为弹性盒子*/
        flex-flow: column nowrap; /*主轴横向对齐 不换行*/
        text-align: center; /*文本居中对齐*/
        border: 1px solid; /*边框线*/
        background-color: #fff; /*背景颜色*/
      }
      @media screen and (max-width: 900px) {
        .container div:last-of-type {
          display: none;
        } /*当宽度小于900px时  主体内容里的right不显示*/
      }
      @media screen and (max-width: 700px) {
        header > a:not(:nth-of-type(-n + 5)) {
          display: none;
        } /*当宽度小于700px时 只显示前5个导航*/
      }
    </style>
  <body>
    <div class="box">
      <!--导航-->
      <header>
        <a href="#">LOGO</a>
        <a href="#">首页</a>
        <a href="#">视频教程</a>
        <a href="#">入门教程</a>
        <a href="#">社区问答</a>
        <a href="#">技术文章</a>
        <a href="#">资源下载</a>
        <a href="#">编程词典</a>
        <a href="#">工具下载</a>
        <a href="#">PHP培训</a>
      </header>
      <!--主体-->
      <div class="container">
        <div class="left"><h1>头条</h1></div>
        <div class="middle"><h1>最新课程</h1></div>
        <div class="right"><h1>常用手册</h1></div>
      </div>
      <!--底部-->
      <footer>
        <p>php中文网：公益在线php培训，帮助PHP学习者快速成长！</p>
        <p>
          Copyright 2014-2020 https://www.php.cn/ All Rights Reserved |
          苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1
        </p>
      </footer>
    </div>
  </body>
效果: