使用display: flex定義彈性盒子。
justify-content屬性可以水平對(duì)齊元素，并且接受以下幾個(gè)參數(shù)：
flex-start: 元素和容器的左端對(duì)齊。
flex-end: 元素和容器的右端對(duì)齊。
center: 元素在容器里居中泳桦。
space-between:元素之間保持相等的距離。
space-around:元素周圍保持相等的距離娩缰。
align-items屬性可以縱向?qū)R元素并且可選以下幾個(gè)值：
flex-start: 元素與容器的頂部對(duì)齊灸撰。
flex-end: 元素與容器的底部對(duì)齊。
center: 元素縱向居中。
baseline: 元素在容器的基線位置顯示浮毯。
stretch: 元素被拉伸以填滿整個(gè)容器完疫。
flex-direction屬性定義了元素在容器里擺放的方向，并且接受這些值：
row: 元素?cái)[放的方向和文字方向一致债蓝。
row-reverse: 元素?cái)[放的方向和文字方向相反壳鹤。
column: 元素從上放到下。
column-reverse: 元素從下放到上饰迹。
７际摹！啊鸭！注意當(dāng)你調(diào)轉(zhuǎn)行或列的方向后锹淌，flex-start和flex-end對(duì)應(yīng)的方向也被調(diào)轉(zhuǎn)了。
Ｔ啤Ｂ赴凇！注意當(dāng)flex以列為方向時(shí)钟些，justify-content控制縱向?qū)R烟号，align-items控制橫向?qū)R。
有時(shí)候僅僅調(diào)轉(zhuǎn)行或列的方向是不夠的厘唾。在這些情況褥符，我們可以設(shè)置單個(gè)元素的order屬性龙誊。元素的屬性默認(rèn)值為0抚垃，但是我們?cè)O(shè)置這個(gè)屬性為正數(shù)或負(fù)數(shù)。
你可以使用的控制單個(gè)元素的屬性是align-self趟大。這個(gè)屬性接受和align-items一樣的那些值鹤树。
用flex-wrap屬性可以對(duì)元素進(jìn)行換行。這個(gè)屬性接受這些值：
nowrap: 所有的元素都在一行逊朽。
wrap: 元素自動(dòng)換成多行罕伯。
wrap-reverse: 元素自動(dòng)換成逆序的多行。
flex-direction和flex-wrap兩個(gè)屬性經(jīng)常會(huì)一起使用叽讳。所以有縮寫屬性flex-flow追他。這個(gè)縮寫屬性接受兩個(gè)屬性的值，兩個(gè)值中間以空格隔開岛蚤。
舉個(gè)例子邑狸，你可以用flex-flow: row wrap。
你可以使用align-content來決定行與行之間隔多遠(yuǎn)涤妒。這個(gè)屬性接受這些值：
flex-start: 多行都集中在頂部单雾。
flex-end: 多行都集中在底部。
center: 多行居中。
space-between: 行與行之間保持相等距離硅堆。
space-around: 每行的周圍保持相等距離屿储。
stretch: 每一行都被拉伸以填滿容器。
這可能有些容易混淆渐逃，但align-content決定行之間的間隔够掠，而align-items決定元素整體在容器的什么圍著。只有一行的時(shí)候align-content沒有任何效果朴乖。
