定義容器的display屬性：

.box{
    display: -webkit-flex; /*webkit*/
    display: flex;
}

容器樣式

.box{
    flex-direction: row | row-reverse | column | column-reverse;
    /*主軸方向：左到右（預設） | 右到左 | 上到下 | 下到上*/
    
    flex-wrap: nowrap | wrap | wrap-reverse;
    /*換行：不換行（預設） | 換行 | 換行並第一行在下方*/

    flex-flow: <flex-direction>  <flex-wrap>;
    /*主軸方向和換行簡寫*/

    justify-content: flex-start | flex-end | center | space-between | space-around;
    /*主軸對齊方式：左對齊（預設） | 右對齊 | 居中對齊 | 兩端對齊 | 平均分佈*/

    align-items: flex-start | flex-end | center | baseline | stretch;
    /*交叉軸對齊方式：頂部對齊（預設） | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 文字基線對齊*/

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    /*多主軸對齊：頂部對齊（預設） | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 上下平均分佈*/
}

flex-direction值介紹如下：     row: 預設值。靈活的專案將水平顯示，正如一個行一樣。     row-reverse: 與 row 相同，但是以相反的順序。     column: 靈活的專案將垂直顯示，正如一個列一樣。     column-reverse: 與 column 相同，但是以相反的順序。

flex-wrap 值介紹如下:     nowrap: flex容器為單行。該情況下flex子項可能會溢位容器。     wrap: flex容器為多行。該情況下flex子項溢位的部分會被放置到新行，子項內部會發生斷行。      wrap-reverse： 換行並第一行在下方

flex-flow值介紹如下(主軸方向和換行簡寫)：     <flex-direction>: 定義彈性盒子元素的排列方向     <flex-wrap>：控制flex容器是單行或者多行。

justify-content值介紹如下：     flex-start: 彈性盒子元素將向行起始位置對齊。     flex-end: 彈性盒子元素將向行結束位置對齊。     center: 彈性盒子元素將向行中間位置對齊。     space-between: 第一個元素的邊界與行的主起始位置的邊界對齊，同時最後一個元素的邊界與行的主結束位置的邊距對齊， 而剩餘的伸縮盒專案則平均分佈，並確保兩兩之間的空白空間相等。 space-around: 伸縮盒專案則平均分佈，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最後一個元素後的空間為其他空白空間的一半。

align-items值介紹如下:    flex-start: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。    flex-end: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。    center: 彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。     baseline: 如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。    stretch: 如果指定側軸大小的屬性值為'auto'，則其值會使專案的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

align-content值介紹如下:     flex-start: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。     flex-end: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。     center: 彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。     space-between: 第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界， 剩餘的行則按一定方式在彈性盒視窗中排列，以保持兩兩之間的空間相等。    space-around: 各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半。    stretch: 各行將會伸展以佔用剩餘的空間。如果剩餘的空間是負數，該值等效於'flex-start'。在其它情況下，剩餘空間被所有行平分，以擴大它們的側軸尺寸。

子元素屬性

.item{
    order: <integer>;
    /*排序：數值越小，越排前，預設為0*/

    flex-grow: <number>; /* default 0 */
    /*放大：預設0（即如果有剩餘空間也不放大，值為1則放大，2是1的雙倍大小，以此類推）*/

    flex-shrink: <number>; /* default 1 */
    /*縮小：預設1（如果空間不足則會縮小，值為0不縮小）*/

    flex-basis: <length> | auto; /* default auto */
    /*固定大小：預設為0，可以設定px值，也可以設定百分比大小*/

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    /*flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto，*/

    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    /*單獨對齊方式：自動（預設） | 頂部對齊 | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 文字基線對齊*/
}