今天记录一下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)