1：找個容器：

.container {
    display: flex | inline-flex;       //可以有兩種取值：塊元素，行內元素
}

2：容器的設定：

.container {
    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;                 //主軸折行的場合，多個主軸在輔軸方向上的對齊方式
}

3：子元素的設定：

.item {
    order: <integer>;
    flex-basis: <length> | auto;
    flex-grow: <number>;
    flex-shrink
 
: <number>;
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}