关于flex的小问题

一、使用情景

// HTML代码结构如下：
	

	    
1
	    
2
	    
3
	    
4
	    
5
	    
6
	    
7
	    
8
	    
9
	 

1. 常使用场景1：子元素之间有间隔
   

.parent{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;  // 水平方向间隔通过该属性自动计算
    align-content: flex-start;      // 垂直方向先设为起点对齐，后子元素通过margin-bottom设置
  }
  .child{
    margin-bottom: 10px;
  }