csss实现div横向等间距排列

洪七公

在很多时候，都会遇到div的横向等间距排列问题，像下图这种排列，就是典型的div等间距排列。

直接给出代码吧，供大家参考学习！

1. 
   
2. <div class="context">
   
3.   <div class="list">list1</div>
   
4.   <div class="list">list1</div>
   
5.   <div class="list">list1</div>
   
6. </div>
   
7. <style>
   
8.   .context{
   
9.     width: 300px;
   
10.     height: 200px;
    
11.     display:-webkit-flex;
    
12.     display: flex;
    
13. //写两个这个是为了兼容性，效果都是一样的
    
14.     justify-content: space-around;
    
15. 
    
16. }
    
17. </style>
    

复制代码