使用display: flex定義彈性盒子。
justify-content屬性可以水平對齊元素，并且接受以下幾個參數(shù)：
flex-start: 元素和容器的左端對齊。
flex-end: 元素和容器的右端對齊。
center: 元素在容器里居中。
space-between:元素之間保持相等的距離。
space-around:元素周圍保持相等的距離。

align-items屬性可以縱向?qū)R元素并且可選以下幾個值：
flex-start: 元素與容器的頂部對齊。
flex-end: 元素與容器的底部對齊。
center: 元素縱向居中。
baseline: 元素在容器的基線位置顯示。
stretch: 元素被拉伸以填滿整個容器。

flex-direction屬性定義了元素在容器里擺放的方向，并且接受這些值：
row: 元素擺放的方向和文字方向一致。
row-reverse: 元素擺放的方向和文字方向相反。
column: 元素從上放到下。
column-reverse: 元素從下放到上。

?。?！注意當(dāng)你調(diào)轉(zhuǎn)行或列的方向后，flex-start和flex-end對應(yīng)的方向也被調(diào)轉(zhuǎn)了。
?。?！注意當(dāng)flex以列為方向時，justify-content控制縱向?qū)R，align-items控制橫向?qū)R。

有時候僅僅調(diào)轉(zhuǎn)行或列的方向是不夠的。在這些情況，我們可以設(shè)置單個元素的order屬性。元素的屬性默認(rèn)值為0，但是我們設(shè)置這個屬性為正數(shù)或負(fù)數(shù)。

你可以使用的控制單個元素的屬性是align-self。這個屬性接受和align-items一樣的那些值。

用flex-wrap屬性可以對元素進(jìn)行換行。這個屬性接受這些值：

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

flex-direction和flex-wrap兩個屬性經(jīng)常會一起使用。所以有縮寫屬性flex-flow。這個縮寫屬性接受兩個屬性的值，兩個值中間以空格隔開。
舉個例子，你可以用flex-flow: row wrap。

你可以使用align-content來決定行與行之間隔多遠(yuǎn)。這個屬性接受這些值：
flex-start: 多行都集中在頂部。
flex-end: 多行都集中在底部。
center: 多行居中。
space-between: 行與行之間保持相等距離。
space-around: 每行的周圍保持相等距離。
stretch: 每一行都被拉伸以填滿容器。
這可能有些容易混淆，但align-content決定行之間的間隔，而align-items決定元素整體在容器的什么圍著。只有一行的時候align-content沒有任何效果。