flex布局一行顯示多個

在前端開發的時候，對頁面布局的時候，經常遇到固定的一行顯示多個，這個經常遇到，是以我想做個記錄，等到下次遇到的時候，可以直接拿來使用。本篇部落格會持續更新

（1）flex布局之一行顯示4個，如果多于4個，自動換行，代碼如下

<div style="display: flex; justify-content: space-between; flex-wrap: wrap; ">
        <div class="item" style="background-color: aliceblue;"></div>
        <div class="item" style="background-color: antiquewhite;"></div>
        <div class="item" style="background-color: aqua;"></div>
        <div class="item" style="background-color: black;"></div>
        <div class="item" style="background-color: blueviolet;"></div>
        <div class="item" style="background-color: chartreuse;"></div>
        <div class="item" style="background-color: crimson;"></div>
    </div>

    <style>
        .item{
          color: black;
          flex: 0 0 24%; 
          height: 30px; 
          text-align:center;
          line-height:30px;
          background-color: white;
          /* 邊距懶得算，css函數代替 */ 
          margin-right: calc(4% / 3); 
          margin-bottom: calc(4% / 3); 
        } 
        /* 去除每行尾的多餘邊距 */
        .item:nth-child(4n){ 
          margin-right: 0; 
        } 
        /* 使最後一個元素的邊距填滿剩餘空間 */
        .item:last-child{ 
          margin-right: auto; 
        } 
    
    </style>
           

效果圖：

父盒子：

style="display: flex; justify-content: space-between; flex-wrap: wrap; "
           

子盒子：

.item{
          color: black;
          flex: 0 0 24%; 
          height: 30px; 
          text-align:center;
          line-height:30px;
          background-color: white;
          /* 邊距懶得算，css函數代替 */ 
          margin-right: calc(4% / 3); 
          margin-bottom: calc(4% / 3); 
        } 
        /* 去除每行尾的多餘邊距 */
        .item:nth-child(4n){ 
          margin-right: 0; 
        } 
        /* 使最後一個元素的邊距填滿剩餘空間 */
        .item:last-child{ 
          margin-right: auto; 
        }