关于flex的小问题

一、使用情景

// HTML代码结构如下：
	<div class="parent">
	    <div class="child" style="background-color: antiquewhite;">1</div>
	    <div class="child" style="background-color: rgb(247, 144, 10);">2</div>
	    <div class="child" style="background-color: rgb(192, 14, 14);">3</div>
	    <div class="child" style="background-color: rgb(29, 218, 231);">4</div>
	    <div class="child" style="background-color: rgb(140, 197, 8);">5</div>
	    <div class="child" style="background-color: rgb(0, 201, 216);">6</div>
	    <div class="child" style="background-color: rgb(57, 230, 109);">7</div>
	    <div class="child" style="background-color: rgb(204, 28, 57);">8</div>
	    <div class="child" style="background-color: rgb(233, 29, 199);">9</div>
	 </div>

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

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