justify-content 屬性用於對齊 flex 。 center值將 flex 專案在容器的中心對齊， flex-start 值將 flex 專案在容器的開頭對齊（預設）， flex-end 值將 flex 專案在容器的末端對齊， space-around 值顯示行之前、之間和之後帶有空格的 flex 專案， space-between 值顯示行之間有空格的 flex 專案。

felx彈性佈局

display:flex;

屬性值

flex-direction屬性定義容器要在哪個方向上堆疊 flex 專案。預設為水平方向 row，column值設定垂直方向。如：flex-direction: row;

flex-wrap屬性規定是否應該對 flex 專案換行。預設不換行nowrap，wrap 規定行裝不下就換行。如：flex-wrap: wrap;

flex-flow屬性是用於同時設定 flex-direction 和 flex-wrap 屬性的簡寫屬性。如：flex-flow: row wrap;

justify-content屬性用於對齊 flex 。

center

值將 flex 專案在容器的中心對齊，

flex-start值將 flex 專案在容器的開頭對齊（預設），

flex-end值將 flex 專案在容器的末端對齊，

space-around值顯示行之前、之間和之後帶有空格的 flex 專案，

space-between值顯示行之間有空格的 flex 專案。

align-items屬性用於垂直對齊 flex 專案。

center值將 flex 專案在容器中間對齊，

flex-start值將 flex 專案在容器頂部對齊，

flex-end值將彈性專案在容器底部對齊，

stretch值拉伸 flex 專案以填充容器（預設），

baseline值使 flex 專案基線對齊，

學習了這些我們來一起簡單的使用一下吧！

實現居中

width:300px; display:flex; justify-content:center; align-items:center;

子元素（專案）

flex 容器的直接子元素會自動成為彈性（flex）專案。

order屬性規定 flex 專案的順序。預設為0；值為數字 1 2 3 4 5 6...是多少就排在第幾個。

flex-grow屬性規定某個 flex 專案相對於其餘 flex 專案將增長多少。預設為0，值為數字。

flex-shrink屬性規定某個 flex 專案相對於其餘 flex 專案將收縮多少。

flex-basis屬性規定 flex 專案的初始長度。

flex屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。

align-self屬性規定彈性容器內所選專案的對齊方式。

align-self屬性將覆蓋容器的 align-items 屬性所設定的預設對齊方式。