Flexbox 是在CSS中相當重要的功能，主要可以用於網頁排版。任何在網頁中需要「排列」的部份，都會用到相關的語法，因此在這邊打好基礎相當重要。

建置HTML的網頁

在撰寫CSS之前，當然要有可以加上外觀的網頁。首先我們先在HTML做出三個「盒子」：

<div class="box">
  <div class="box1">
  1
  </div>
  <div class="box2">
  2
  </div>
  <div class="box3">
  3
  </div>
</div>

父元素與子元素

這段語法簡單的做出三個「盒子」，首先先做了一個大盒子，裡面再分別放入盒子1、2、3，在尚未上CSS樣式之前，這個網頁只會看到單純的123這些文字，看不到前述語法中的分層關係。這邊的box class夾住box1、box2、box3，box就是父元素，box1、box2、box3就是box的子元素，只要將CSS樣式套在box上，box1、box2、box3都會改變，對父元素下指令讓子元素進行排列是常見的排版模式之一。

為了看清楚子元素的排列，先幫三個盒子套上樣式，這邊只放盒子1的CSS語法：

.box1 {
  font-size:24px; /*字體大小為24px*/
  text-align:center; /*以橫向來看，文字置中*/
  line-height: 100px; /*單行高度為100px*/
  width: 100px; /*寬度為 100px*/
  height: 100px; /*高度為100px*/
  color:white; /*文字顏色為白色*/
  background-color: rgba(200,0,0,1); /*背景顏色為紅色*/
}

CSS語法每一行的意思已經加入備註可以自行閱讀理解，盒子2、3可改變background-color變換不同顏色以利區別。

開始排版

首先先在box的class加上以下樣式：

.box{
  display:flex; /*讓box中的元素有彈性，預設會自動換行*/
  border:1px solid #000000; /*在box周圍增加一個1px寬的黑色實線方框*/
}

接著在box的class中分別加入以下CSS樣式：

/*這四個語法只能擇一放入*/
justify-content:flex-end; /*置右對齊*/
justify-content:center; /*置中對齊*/
justify-content:space-between; /*1置左、3置右，其他子元素中間均分*/
justify-content:space-around; /*水平均分*/

已經將每一行的語法的作用放在備註中，一次只能放一種，一起放CSS只會抓取justify-content中最後一個在box的class出現的語法。

範例參考

以下範例為今天說明內容的實作頁面，透過HTML製作父元素box，其中有三個子元素，並對三個子元素套上外觀樣式與排列，請參考：
https://codepen.io/hamagawa76/pen/rNdQoNx

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