今天記錄一下css布局的flex布局的一個小妙招之gap

在平常前端開發中，常見的開發布局flex布局，常見的布局有這個樣子，這個是可以用css進行修改，但是今天分享一個簡單的方法

 

 

 這種布局的話，如果是偶數的話可以用flex的 justify-content: space-between;，但是如果像上面五個那樣的就回出現下面的這種情況，使用gap就可以更簡單的進行實現，代碼如下,就進行了簡單的操作，可以根據業務樣式自行修改

//html
　　<div class="flexBox">
        <div class="flexItem"></div>
        <div class="flexItem"></div>
        <div class="flexItem"></div>
        <div class="flexItem"></div>
        <div class="flexItem"></div>
    </div>
//css

 
          
            　　.flexBox{ 
           
          
                    width: 700px; 
           
          
                    height: 250px; 
           
          
                    border: 1px solid #000; 
           
          
                    margin-top: 30px; 
           
          
                    display: flex; 
           
          
                    flex-wrap: wrap; 
           
          
                    /* justify-content: space-between; */ 
           
          
                    gap:50px; 
           
          
 
          
                } 
           
          
                .flexItem{ 
           
          
                    width: 200px; 
           
          
                    height: 100px; 
           
          
                    background-color: #03a9f4; 
           
          
                    border: 1px solid #000; 
           
          
                    box-sizing: border-box; 
           
          
                } 
           
         

 

今天的記錄就到此為止了，更多gap的使用方法可以查看gap (grid-gap) - CSS（層疊樣式表） | MDN (mozilla.org)