關於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;
  }