<tbody id="j99e4"></tbody>

<dd id="j99e4"></dd>

  • <button id="j99e4"><object id="j99e4"></object></button>
      1. <th id="j99e4"></th>
        <button id="j99e4"><acronym id="j99e4"></acronym></button><rp id="j99e4"><object id="j99e4"><input id="j99e4"></input></object></rp>

        前端CSS3布局display:grid用法
        2022-05-31 17:26:07

        前端CSS3布局display:flex用法

        1. 先附上代碼

        點擊查看代碼
        <!DOCTYPE html>
        <html>
        
          <head>
            <meta charset="utf-8">
            <title>display:flex</title>
            <style>
              .grid-box {
                width: 100%;
                background-color: lightseagreen;
              }
        
              .grid-box>div {
                background-color: lightskyblue;
                text-align: center;
                border: 1px solid red;
              }
            </style>
          </head>
        
          <body>
            <div class="grid-box">
              <div>1</div>
              <div>2</div>
              <div>3</div>
              <div>4</div>
              <div>5</div>
              <div>6</div>
              <div>7</div>
              <div>8</div>
            </div>
          </body>
        
        </html>
        
        

        效果圖

        image

        給grid-box加上display: grid

        點擊查看代碼
        .grid-box {
            width: 100%;
            background-color: lightseagreen;
            display: grid;
        }
        

        效果圖

        image

        可以看到并沒有什么變化,說明grid默認縱向排列

        2. 接下來詳解grid布局的幾個常用屬性

        • grid-template-columns
        • grid-template-rows
        • gap
        • grid-template-areas
        • justify-items
        • align-items

        1. grid-template-columns

        決定網格布局中的列數(和寬度)

        網格呈三列排列且每列120px

        上代碼

        點擊查看代碼
        .grid-box {
            width: 100%;
            background-color: lightseagreen;
            display: grid;
            grid-template-columns: 120px 120px 120px;
        }
        

        效果圖

        image

        簡寫方式

        grid-template-columns: repeat(3, 120px)

        也可這樣設置

        grid-template-columns: 120px auto 120px

        兩邊的寬度為120px,中間的寬度自動填充

        效果圖

        image

        可用fr表示比例關系(fraction 的縮寫,意為"片段”)

        將寬度平均分成3等份

        上代碼

        點擊查看代碼
        .grid-box {
            width: 100%;
            background-color: lightseagreen;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
        

        效果圖

        image

        將寬度分成3份,每份各占1 2 3

        上代碼

        點擊查看代碼
        .grid-box {
            width: 100%;
            background-color: lightseagreen;
            display: grid;
            grid-template-columns: 1fr 2fr 3fr;
        }
        

        效果圖

        image

        單元格大小固定,但容器大小不確定,auto-fill屬性就會自動填充

        上代碼

        點擊查看代碼
        .grid-box {
            width: 100%;
            background-color: lightseagreen;
            display: grid;
            grid-template-columns: repeat(auto-fill, 170px);
        }
        

        效果圖

        image

        minmax()函數產生一個長度范圍,接受兩個參數,分別為最小值和最大值

        上代碼

        點擊查看代碼
        .grid-box {
            width: 100%;
            background-color: lightseagreen;
            display: grid;
            grid-template-columns: 1fr minmax(150px, 300px);
        }
        

        效果圖

        image

        第二列的最小寬度為150px,最大寬度為300px

        2. grid-template-rows

        規定網格布局中行的高度

        前三行每行高120px

        上代碼

        點擊查看代碼
        .grid-box {
            width: 100%;
            background-color: lightseagreen;
            display: grid;
            grid-template-rows: 120px 120px 120px;
        }
        

        效果圖

        image

        簡寫方式

        grid-template-rows: repeat(3, 120px)

        也可這樣設置

        grid-template-rows: 120px auto 120px

        第一行高度為120px,第二行的高度自動,第三行的高度為120px

        效果圖

        image

        可用fr表示比例關系(fraction 的縮寫,意為"片段”)

        將前三行的高度設置為1fr 2fr 3fr

        上代碼

        點擊查看代碼
        .grid-box {
            width: 100%;
            background-color: lightseagreen;
            display: grid;
            grid-template-rows: 1fr 2fr 3fr;
        }
        

        效果圖

        image

        minmax()函數產生一個長度范圍,接受兩個參數,分別為最小值和最大值

        上代碼

        點擊查看代碼
        .grid-box {
            width: 100%;
            background-color: lightseagreen;
            display: grid;
            grid-template-rows: 80px minmax(150px, 300px) 120px;
        }
        

        效果圖

        image

        3. gap

        規定網格布局中行與列之間間隙的尺寸

        上代碼

        點擊查看代碼
        .grid-box {
            width: 100%;
            background-color: lightseagreen;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr 2fr 3fr;
            gap: 1em;
        }
        

        效果圖

        image

        還可以這樣寫

        grid-gap: 1em 2em;

        1em是行之間的間隙,2em是列之間的間隙

        效果圖

        image

        4. grid-template-areas

        在網格布局中規定區域

        上代碼

        點擊查看代碼
        <!DOCTYPE html>
        <html>
        
          <head>
            <meta charset="utf-8">
            <title>display:flex</title>
            <style>
              .item1 {
                grid-area: myArea1;
              }
        
              .item5 {
                grid-area: myArea5;
              }
        
              .item8 {
                grid-area: myArea8;
              }
        
              .grid-box {
                width: 100%;
                background-color: lightseagreen;
                display: grid;
                grid-template-areas:
                  'myArea1 myArea1 . . '
                  'myArea5 myArea8 . . '
                  'myArea5 myArea8 . . ';
              }
        
              .grid-box>div {
                background-color: lightskyblue;
                text-align: center;
                border: 1px solid red;
              }
            </style>
          </head>
        
          <body>
            <div class="grid-box">
              <div class="item1">1</div>
              <div class="item2">2</div>
              <div class="item3">3</div>
              <div class="item4">4</div>
              <div class="item5">5</div>
              <div class="item6">6</div>
              <div class="item7">7</div>
              <div class="item8">8</div>
            </div>
          </body>
        
        </html>
        
        

        效果圖

        image

        myArea1 myArea1 . .表示4列,一個點表示1列

        item1占1行2列(第1行的第1列和第2列)

        item5占2行1列(第1列的第2行和第3行)

        item8占2行1列(第2列的第2行和第3行)

        4. justify-items

        縱軸上的對齊方式

        上代碼

        點擊查看代碼
        .grid-box {
            width: 100%;
            height: 600px;
            background-color: lightseagreen;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
        

        效果圖

        image

        justify-items: flex-start;(默認值)

        效果圖

        image

        justify-items: center;

        效果圖

        image

        justify-items: flex-end;

        效果圖

        image

        4. align-items

        橫軸上的對齊方式

        上代碼

        點擊查看代碼
        .grid-box {
            width: 100%;
            height: 600px;
            background-color: lightseagreen;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
        

        效果圖

        image

        align-items: flex-start;(默認值)

        效果圖

        image

        align-items: center;

        效果圖

        image

        align-items: flex-end;

        效果圖

        image

        本文摘自 :https://www.cnblogs.com/


        更多科技新聞 ......

        亚洲人成图偷偷小说_亚洲图片小说激情综合_国产精品亚洲自在线播放页码_久久综合亚洲色hezyo国产
        <tbody id="j99e4"></tbody>

        <dd id="j99e4"></dd>

      2. <button id="j99e4"><object id="j99e4"></object></button>
          1. <th id="j99e4"></th>
            <button id="j99e4"><acronym id="j99e4"></acronym></button><rp id="j99e4"><object id="j99e4"><input id="j99e4"></input></object></rp>