以下是彈性佈局的一些知識點，很簡單，易懂！

語法：屬性：display

取值：

• flex：當前元素充當彈性佈局的容器，並且本身以塊級元素顯示。
• inline-flex：當前元素充當彈性佈局的容器，並且本身以行內元素顯示。

概念：

• 容器：容納彈性佈局中子元素的父元素。
• 專案：容器中的子元素

注意：元素一旦變為彈性佈局的元素後，float，clear，vertical-align，text-align都失效，定位屬性是有效的！

接下來就是彈性佈局的核心：彈性佈局的屬性。彈性佈局的屬性分為容器的屬性和專案的屬性。

容器的屬性：

• flex-direction：定義容器的主軸方向
  • row 預設，主軸水平，從左到右
  • row-reverse主軸水平，從右到左
  • column主軸垂直，從上到下
  • column-reverse主軸垂直，從下到上
• flex-wrap：如果專案在容器中一行顯示不下的方式
  • norwap：預設不換行，專案自壓縮
  • wrap：換行
  • wrap-reverse：專案在交叉軸上的換行
• flex-flow：以上兩個屬性的簡寫，取值有兩個
• 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：佔滿整個軸線

專案的屬性：

• order：順序，取值為整數，預設所有專案取值為0，取值越小越往前。
• flex-grow：如果容器有剩餘空間，定義專案的放大比例，將剩餘空間分配給具有此屬性的元素，按比例分配。
• flex-shrink：如果容器有空間不足，定義專案的縮小比例。預設為1，取值為0，不壓縮。
• flex-basis：定義在主軸上的大小，可以覆蓋width/height，預設為auto。
• flex：以上3個屬性的綜合
• align-self：設定當前這個專案的對齊方式，可以覆蓋align-items
  • flex-start：在軸的起點對齊
  • flex-end：末尾段對齊
  • center：居中對齊
  • baseline：基線對齊
  • stretch：如何專案未設定高度，將佔滿整個容器

完結！！！