• 强大的display:grid


    自从用习惯flex布局我基本已经不怎么使用float了。
    现在又出现了grid布局,就像flex的升级版,布局上十分强大。
    主要属性:
    grid-template-columns://竖向排列
    grid-template-rows://横向排列
    首先比较一下flex和grid实现自适应九宫格,高度800px,宽度适应:

    flex

    超过一层后样式就复杂了,特别是边框的处理有点复杂。(方法很多,不一一去展示了)。

    <html>
    <head>
      <style type="text/css">
       .box {
          padding: 10px;
          padding-bottom: 0;
          padding-right: 0;
          display: flex;
          flex-direction: column;
          height: 800px;
           calc(100vw - 20px);
          background-color: #000;
        }
        .content {
          display: flex;
          margin-bottom: 10px;
          flex: 1
        }
        .b {
          flex: 1;
          margin-right: 10px;
          background-color: yellow;
        }
      </style>
    </head>
    <body>
      <div class="box">
        <div class="content">
          <div class="b">1</div>
          <div class="b">2</div>
          <div class="b">3</div>
        </div>
        <div class="content">
          <div class="b">4</div>
          <div class="b">5</div>
          <div class="b">6</div>
        </div>
        <div class="content">
          <div class="b">7</div>
          <div class="b">8</div>
          <div class="b">9</div>
        </div>
      <div>
    </body>
    </html>
    

     


     
    flex

    grid

    真的好用!方法也可以有很多,相对flex而言写起来简单多了哈

    <html>
    <head>
      <style type="text/css">
        .content {
          padding: 10;
          display: grid;
          grid-template-columns: auto auto auto;
          grid-template-rows: auto auto auto;
          height: 780px;   //padding 有个20的宽度
          background-color: #000;
          grid-gap: 10px;
        }
        .b {
          background-color: yellow;
        }
      </style>
    </head>
    <body>
      <div class="content">
        <div class="b">1</div>
        <div class="b">2</div>
        <div class="b">3</div>
        <div class="b">4</div>
        <div class="b">5</div>
        <div class="b">6</div>
        <div class="b">7</div>
        <div class="b">8</div>
        <div class="b">9</div>
      </div>
    </body>
    </html>
    
    

    效果图:


     
    grid
    接下来就只讲grid了。

    常用属性,属性很多,主要练习下常用的一些属性:

    • grid: 1fr 1fr 1fr/1fr 1fr 1fr ; 高度 高度 高度/(一)列 (二)列 (三) 列
    grid: 100px 200px 100px /1fr 1fr 1fr;
    

    等于:

    grid-template-rows: 100px 200px 100px; 
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: none; 
    grid-auto-flow: initial;
    grid-auto-rows: initial;
    grid-auto-columns: initial;
    
    • grid-template-columns: 100px 100px; //有几列,每列有多大

    • grid-template-rows :100px 100px; //有几行,每行有多大

    • grid-template: [] '1 1 1' 100px [] /auto 50px auto;
      //[名称] '几列' 这行的高度 [名称] /三列对应的三个宽度
      //(名称可为空 '1 1 1' 就是均分三列)

    • grid-gap: 10px 20px ;//上下间隔10px,左右间隔20px

    • grid-gap: 10px;//上下左右间隔10px

    • grid-column-gap

    • grid-row-gap

    • justify-items:
      start:将内容对齐到网格区域(grid area)的左侧
      end:将内容对齐到网格区域的右侧
      center:将内容对齐到网格区域的中间(水平居中)
      stretch:填满网格区域宽度(默认值)

    • align-items:
      start:将内容对齐到网格区域(grid area)的顶部
      end:将内容对齐到网格区域的底部
      center:将内容对齐到网格区域的中间(垂直居中)
      stretch:填满网格区域高度(默认值)

    • justify-items:
      start:将网格对齐到 网格容器(grid container) 的左边
      end:将网格对齐到 网格容器 的右边
      center:将网格对齐到 网格容器 的中间(水平居中)
      stretch:调整 网格项(grid items) 的宽度,允许该网格填充满整个 网格容器 的宽度
      space-around:在每个网格项之间放置一个均匀的空间,左右两端放置一半的空间
      space-between:在每个网格项之间放置一个均匀的空间,左右两端没有空间
      space-evenly:在每个栅格项目之间放置一个均匀的空间,左右两端放置一个均匀的空间

    • align-content:
      start:将网格对齐到 网格容器(grid container) 的顶部
      end:将网格对齐到 网格容器 的底部
      center:将网格对齐到 网格容器 的中间(垂直居中)
      stretch:调整 网格项(grid items) 的高度,允许该网格填充满整个 网格容器 的高度
      space-around:在每个网格项之间放置一个均匀的空间,上下两端放置一半的空间
      space-between:在每个网格项之间放置一个均匀的空间,上下两端没有空间
      space-evenly:在每个栅格项目之间放置一个均匀的空间,上下两端放置一个均匀的空间

    这是主体上常用的一些属性了,不想做文档解释了。讲属性的文章挺多的,主要就是练习,多用用。



    原文:https://www.jianshu.com/p/41c038baf994

  • 相关阅读:
    3631: [JLOI2014]松鼠的新家
    1112: [POI2008]砖块Klo
    1935: [Shoi2007]Tree 园丁的烦恼
    4001: [TJOI2015]概率论
    1339 / 1163: [Baltic2008]Mafia
    4010: [HNOI2015]菜肴制作
    4052: [Cerc2013]Magical GCD
    2292: 【POJ Challenge 】永远挑战
    4063: [Cerc2012]Darts
    3997: [TJOI2015]组合数学
  • 原文地址:https://www.cnblogs.com/showcase/p/10524093.html
Copyright © 2020-2023  润新知