1、了解兩個基本概念：

容器：需要添加彈性布局的父元素；

項目：彈性布局容器中的每一個子元素，稱為 項目；

2、彈性布局的使用：

①給父容器添加display:flex/inline-flex:屬性，即可使容器內容采用彈性布局顯示，而不遵循常規文檔流顯示方式；

②容器添加彈性布局後，僅僅是容器內容采用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規文檔流；

③display：flex;容器添加彈性布局後，顯示為塊級元素；display:inline-flex;容器添加彈性布局後顯示為行級元素。

④註意，設為 Flex 布局以後，子元素的float、clear和vertical-align屬性將失效。但是position屬性依然生效。

3、作用於容器的相關屬性；

①flex-direction屬性決定主軸的方向（即項目的排列方向）。

row（默認值）：主軸為水平方向，起點在左端。

row-reverse：主軸為水平方向，起點在右端。

column：主軸為垂直方向，起點在上沿。

column-reverse：主軸為垂直方向，起點在下沿。

②flex-wrap屬性定義，如果一條軸線排不下，如何換行。
nowrap（默認）：不換行。當容器寬度不夠時，每個項目會被擠壓寬度；
wrap：換行，第一行在容器最上方。
wrap-reverse：換行，第一行在容器最下方。
③flex-flow：是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

4.作用於項目上的屬性

① order屬性：定義項目的排列順序。數值越小，排列越靠前，默認為0。

②flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

③flex-basis定義項目占據的主軸空間；(如果主軸為水平，則設置這個屬性，相當於設置項目的寬度，原width將會失效)

④flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。後兩個屬性可選。這個屬性，有兩個快捷設置：auto=(1 1 auto)/none={0 0 auto}

⑤align-self：定義單個項目自身在交叉軸上的排列方式，可以覆蓋掉容器上的align-items屬性。屬性值與align-itmes相同，默認值為auto，表示繼承父容器的align-items屬性值。

Flex 彈性布局