昨天已經介紹過垂直的排列與單個子元素的變化，今天再來說說多個元素排列和換行的機制，首先先製作一個大盒子，裡面放8個小盒子看看一堆盒子擠爆的畫面。

HTML設置，8個子元素

可參考以下語法，先看HTML的部分：

<div class="box">
  <div class="son-box"> 1 </div>
…
  <div class="son-box"> 8 </div>
</div>

CSS屬性設置，淺談flex與inline-flex的差異

為了觀察子元素的排列情況，和前幾天相同，父元素必須設置彈性屬性。在父元素有設定寬度的情況下，display:flex;和display:inline-flex;的呈現方式沒有差異。inline-flex在沒有設定父元素寬度時，父元素寬度會依照子元素的寬度進行彈性變化；flex則是會跟隨父元素的父元素寬度進行彈性變化。可參考以下CSS父元素的屬性設置：

.box{
  display:inline-flex; /*這邊要設定彈性盒子，才能展演後續排列。有設定寬度flex和inline-flex呈現結果相同*/
  flex-wrap:wrap; /*wrap是設定可以多行排列，預設是nowrap，維持單行*/
  width:200px;
  height:200px;
  border:1px solid #000;
}

子元素的設置就沒有什麼特別之處，可以參考以下CSS語法：

.son-box{
  font-size:24px;
  margin:5px 5px 20px;
  text-align:center;
  line-height:30px;
  width: 30px;
  height: 30px;
  color:white;
  background-color: rgba(0,200,200,1);
}

設置完成後可取得以下結果，可參考下圖：

觀察align-content的變化

接著觀察align-content的變化，在父元素box中加上align-content的相關內容，觀察變化：

align-content:flex-start;  /*會向上對齊頂線*/
align-content:flex-end;  /*會向下對齊底線*/
align-content:center;  /*置中對齊*/
align-content:space-between;/*最上行對齊頂線；最下行對齊底線；其他行平均分布*/
align-content:space-around;/*垂直平均分布*/
align-content:stretch; /*子元素未設定高度會延伸到目前排列的最大值*/

相關說明已經加在語法註解中，這邊要特別提一下space-between和space-around。前者是最上面那行與最底下那行會貼齊父元素上邊與下邊後，其他行再進行垂直平均分布；後者是每行進行垂直平均分布。另外stretch一樣在子元素位設定高度時，高度會自動調整至該容器中的每行最大值。可參考下圖各種排列變化。

觀察flex-wrap的變化

接著來觀察flex-wrap的變化，預設值是nowrap，如果把該flex-wrap拿掉就維持nowrap排列，可參考下面語法：
flex-wrap:nowrap; /預設值，維持單行/
flex-wrap:wrap; /第一行沒空間後會自動換行/
flex-wrap: wrap-reverse;/從底線開始排列/

目前已經有說明橫向的排列與垂直排列，以及換行的機制，可以嘗試同時使用這幾種語法，觀察物件的變化。依照目前所教的部分已經可以完成基本的排版囉！

範例參考

以下範例為今天說明內容的實作頁面，透過增加父元素指令改變子元素排列，請參考：
https://codepen.io/hamagawa76/pen/XWEoere

是不是很簡單！明天會再說明其他CSS Flexbox排序的部分了，我們明天見囉！