flex 的核心的概念就是容器和軸。容器包括外層的父容器和內層的子容器，軸包括主軸和交叉軸，可以說 flex 布局的全部特性都構建在這兩個概念上。flex 布局涉及到 12 個 CSS 屬性（
不含 display: flex），其中父容器、子容器各 6 個。不過常用的屬性只有 4 個，父容器、子容器各 2 個。
flex-container.png
容器
容器具有以下的特點：父容器可以統一設置子容器的排列方式，子容器也可以單獨設置自身的排列方式，如果兩者同時設置，以子容器的設置為準。
有下面六種屬性可以設置在容器上，它們分別是：
flex-direction:row | row-reverse | column | column-reverse;
//決定主軸的方向(即項目的排列方向)
flex-wrap:nowrap | wrap | wrap-reverse;
//指定flex元素單行顯示還是多行顯示。
flex-flow:<flex-direction>|<flex-wrap>;
//flex-direction 和 flex-wrap 的簡寫形式
justify-content: flex-start | flex-end | center | space-between | space-around;
/* 均勻排列每個元素(主軸)
space-between首個元素放置于起點，末尾元素放置于終點 . . . .
space-around 每個元素周圍分配相同的空間 */ . . . .
align-items: stretch | flex-start | flex-end | center | baseline ;
//屬性定義項目在交叉軸上如何對齊。
align-content:stretch | flex-start | flex-end | center | space-between|space-around ;
//屬性定義彈性容器的側軸方向上有額外空間時，如何排布每一行。當彈性容器只有一行時無作用。
Flex 項目屬性：
有六種屬性可運用在 item 項目上：
order:<integer>;
//定義項目在容器中的排列順序，數值越小，排列越靠前，默認值為 0
flex-basis:<length>;
//分配多余空間之前，項目占據的主軸空間（main size）。默認值為auto，即項目的本來大小。
flex-grow:<number>;
//定義項目的放大比例
flex-shrink:<number>;
// 定義了項目的縮小比例;
flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
//flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
//align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。
//默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
