image.png

用grid实现

用grid实现，只需要在容器上声明为grid容器，并且设置行列的宽度分片三个1fr，设置列的间距gap间距就ok了
三步骤

  • 声明grid容器；
  • 设置使用分片设置列宽，行也可以省略，那样就变成更自适应了，不再限制于九个元素；
  • 设置gap，行列的间距 ```css / grid实现 /

    container-grid {

    display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-row-gap: 20px; grid-column-gap: 20px; }
  2. <a name="vnEeY"></a>
  3. ### flex实现比较麻烦
  4. 需要用margin控制间距，并在容器上设置便宜，让最左边和最上边的元素多余的margin切去。容器内元素的宽度也需要计算，好在也不是太难，也不需要js控制。<br />具体步骤：
  6. - 容器声明flex，设置容器内元素可以换行
  7. - 设置元素的margin-top和margin-left做间距效果
  8. - 用css计算属性计算元素的宽度
  9. - 设置容器的margin-top和margin-left把最左边和最上边多余的margin切去
  10. ```css
  11. /* flex实现 */
  12. #container-flex {
  13.     display: flex;
  14.     flex-wrap: wrap;
  15.     margin-top: -20px;
  16.     margin-left: -20px;
  17. }
  18. .item-flex {
  19.     font-size: 4em;
  20.     text-align: center;
  21.     width: calc((100% - 60px) / 3);
  22.     margin-top: 20px;
  23.     margin-left: 20px;
  24. }

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  10.     <style>
  11.         html,
  12.         body {
  13.             margin: 0;
  14.             padding: 0;
  15.             background-color: black;
  16.             box-sizing: border-box;
  17.         }
  20.         .item {
  21.             font-size: 4em;
  22.             text-align: center;
  23.         }
  25.         .item-1 {
  26.             background-color: #ef342a;
  27.         }
  29.         .item-2 {
  30.             background-color: #f68f26;
  31.         }
  33.         .item-3 {
  34.             background-color: #4ba946;
  35.         }
  37.         .item-4 {
  38.             background-color: #0376c2;
  39.         }
  41.         .item-5 {
  42.             background-color: #c077af;
  43.         }
  45.         .item-6 {
  46.             background-color: #f8d29d;
  47.         }
  49.         .item-7 {
  50.             background-color: #b5a87f;
  51.         }
  53.         .item-8 {
  54.             background-color: #d0e4a9;
  55.         }
  57.         .item-9 {
  58.             background-color: #4dc7ec;
  59.         }
  62.         /* grid实现 */
  63.         #container-grid {
  64.             border: 0px solid red;
  65.             display: grid;
  66.             grid-template-columns: 1fr 1fr 1fr;
  67.             grid-row-gap: 20px;
  68.             grid-column-gap: 20px;
  69.         }
  72.         /* flex实现 */
  73.         #container-flex {
  74.             display: flex;
  75.             flex-wrap: wrap;
  76.             margin-top: -20px;
  77.             margin-left: -20px;
  78.         }
  80.         .item-flex {
  81.             font-size: 4em;
  82.             text-align: center;
  83.             width: calc((100% - 60px) / 3);
  84.             margin-top: 20px;
  85.             margin-left: 20px;
  86.         }
  87.     </style>
  88. </head>
  90. <body>
  93.     <div id="container-flex">
  94.         <div class="item-flex item-1">1</div>
  95.         <div class="item-flex item-2">2</div>
  96.         <div class="item-flex item-3">3</div>
  97.         <div class="item-flex item-4">4</div>
  98.         <div class="item-flex item-5">5</div>
  99.         <div class="item-flex item-6">6</div>
  100.         <div class="item-flex item-7">7</div>
  101.         <div class="item-flex item-8">8</div>
  102.         <!-- <div class="item-flex item-9">9</div> -->
  103.     </div>
  104.     <h1 style="color: #fff">flex实现</h1>
  107.     <br />
  108.     <br />
  109.     <hr />
  110.     <br />
  111.     <br />
  113.     <div id="container-grid">
  114.         <div class="item item-1">1</div>
  115.         <div class="item item-2">2</div>
  116.         <div class="item item-3">3</div>
  117.         <div class="item item-4">4</div>
  118.         <div class="item item-5">5</div>
  119.         <div class="item item-6">6</div>
  120.         <div class="item item-7">7</div>
  121.         <div class="item item-8">8</div>
  122.         <!-- <div class="item item-9">9</div> -->
  123.     </div>
  124.     <h1 style="color: #fff">grid实现</h1>
  128. </body>
  130. </html>

参考

css计算属性
https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc())