彈性佈局的名稱概念： 1、容器：需要添加彈性佈局的父元素；項目：彈性佈局容器中的每一個子元素，稱為項目。 2、主軸：在彈性佈局中，我們會通過屬性規定水平/垂直方向（flex-direction）為主軸；與主軸垂直的另一方向，稱為交叉軸。 彈性佈局的重要的幾大基礎屬性： 1、flex-directio ...
彈性佈局的名稱概念：
1、容器：需要添加彈性佈局的父元素；項目：彈性佈局容器中的每一個子元素，稱為項目。
2、主軸：在彈性佈局中，我們會通過屬性規定水平/垂直方向（flex-direction）為主軸；與主軸垂直的另一方向，稱為交叉軸。
彈性佈局的重要的幾大基礎屬性：
1、flex-direction屬性決定主軸的方向（即項目的排列方向）。
row（預設值）： 主軸為水平方向，起點在左端；
row-reverse： 主軸在水平方向，起點在右端 ；
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
2、flex-wrap屬性定義（定義是否換行）
nowrap（預設）：不換行。當容器寬度不夠時，每個項目會被擠壓寬度；
wrap： 換行，並且第一行在容器最上方；
wrap-reverse： 換行，並且第一行在容器最下方。
註：（flex-flow 是flex-direction和flex-wrap的縮寫形式，預設值為：flex-flow: row wrap;）
3、justify-content屬性定義了項目在主軸上的對齊方式。
flex-start（預設值）： 項目位於主軸起點。
flex-end：項目位於主軸終點。
row-起點在左邊，row-reverse-起點在右邊， column-起點在上邊，column-reverse-起點在下邊；
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。(開頭和最後的項目，與父容器邊緣沒有間隔)
space-around：每個項目兩側的間隔相等。但是項目之間的間隔比項目與邊框的間隔大一倍。(開頭和最後的項目，與父容器邊緣有一定的間隔)
space-evenly：每個項目兩側的間隔相等。所以，項目之間的間隔和項目與邊框的間隔相同。
4、align-items屬性定義項目在交叉軸上如何對齊；
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。(文字的行高、字體大小會影響每行的基線)
stretch（預設值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
5、align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
(當項目換為多行時，可使用align-content取代align-items)
