display：flex；設定彈性盒子

justify-content屬性：這個屬性可以水平對齊元素

• flex-start: 元素和容器的左端對齊。
• flex-end: 元素和容器的右端對齊。
• center: 元素在容器里居中。
• space-between:元素之間保持相等的距離。
• space-around:元素周圍保持相等的距離。

align-items屬性：這個CSS屬性縱向對齊元素

• flex-start: 元素與容器的頂部對齊。
• flex-end: 元素與容器的底部對齊。
• center: 元素縱向居中。
• baseline: 元素在容器的基線位置顯示。
• stretch: 元素被拉伸以填滿整個容器。

flex-direction屬性：這個CSS屬性定義了元素在容器裡擺放的方向

• row: 元素擺放的方向和文字方向一致。
• row-reverse: 元素擺放的方向和文字方向相反。
• column: 元素從上放到下。
• column-reverse: 元素從下放到上。

order屬性：有時候僅僅調轉行或列的方向是不夠的。在這些情況，我們可以設定單個元素的order屬性。元素的屬性預設值為0，但是我們設定這個屬性為正數或負數。調整順序。

flex-wrap屬性：把元素放在一行或者自動轉換多行

• nowrap: 所有的元素都在一行。
• wrap: 元素自動換成多行。
• wrap-reverse: 元素自動換成逆序的多行。

flex-direction和flex-wrap兩個屬性經常會一起使用，所以有縮寫屬性flex-flow。這個縮寫屬性接受兩個屬性的值，兩個值中間以空格隔開。

舉個例子，你可以用flex-flow: row wrap去設定行並自動換行。

align-content屬性：來決定行與行之間隔多遠

• flex-start: 多行都集中在頂部。
• flex-end: 多行都集中在底部。
• center: 多行居中。
• space-between: 行與行之間保持相等距離。
• space-around: 每行的周圍保持相等距離。
• stretch: 每一行都被拉伸以填滿容器。