• flex实现常见布局


    flex相信大家都不陌生,对其各个属性都知道,不同属性的搭配能实现我们常见的复杂布局,可以说简单粗暴了~

    1、topbar + main + footbar

    html代码

    <div class="container">
         <header>header...</header>
         <main>内容</main>
         <footer>footer...</footer>
    </div>

    css代码

    header{
      height:100px;
      background:#0de294;
    }
    footer{
      height:100px;
      background:#0de294;
    }
    .container{
      display:flex;
      flex-direction:column;
      height:100vh;//屏幕高度的100 %
    }
    main{
      flex-grow:1;//实现了main自动填充剩余空间
    }

    2、元素的水平垂直居中

    html代码

    <div class="container">
        <div class="inner">center</div>
    </div>

    css代码

    .container{
      height:300px;
      width:300px;
      border:1px solid #0de294;
      display:flex;
      justify-content:center;  //水平居中
      align-items:center;   //垂直居中
    }
    
    .inner{
      color: #0de294;
    }

    3、圣杯布局

    html代码

    <div class="container">
           <main>main</main>
           <aside>aside</aside>
           <nav>nav</nav>
    </div>

    css代码

    .container{
      display:flex;
      height:100vh;
    }
    aside{
      width:50px;
      background:#0de294;
    }
    main{
      flex-grow:1;
    }
    nav{
      width:80px;
      background:#0de294;
      order:-1;//使得order处于最左侧(html中main写在了最前,以利于优先加载主内容区)
    }

    4、平均分配空间的栅格布局

    html 代码

    <div class="row">
             <div class="column">1</div>
             <div  class="column">2</div>
             <div  class="column">3</div>
    </div>

    css代码

    .row{
      display:flex;
      flex-wrap:wrap;
      border:1px solid #0de294;
    }
    .column{
      list-style:none;
      flex:1;//相当于flex:1 1 0%,而之所以不管各个column元素内容的宽度为多大,都能均分到相等的空间,正是因为相当于在设置了flex-grow:1使得剩余空间按相等比例自动分配的同时又设置了flex-basis:0%,才使得整个空间都平均分配了。
      height:100px;
      border:1px solid black;
    }
    码农随笔防失忆,只为记录风雨路上的脚丫印印~
  • 相关阅读:
    【数学水题】【TOJ4113】【 Determine X】
    【(阶乘的质因数分解)算组合数】【TOJ4111】【Binomial efficient】
    【组合数取模进阶中..】
    【转载】【转自AekdyCoin的组合数取模】
    37.es中批量写入数据
    36.爬取柯林斯字字典
    34.django使用jwt
    33.python中的单例模式
    32.爬虫2
    31.爬虫一
  • 原文地址:https://www.cnblogs.com/bella-lin/p/9111727.html
Copyright © 2020-2023  润新知