Flex 是 CSS3 中，用來排版布局的屬性，可以更有效率的完成排版，有人說 flex 就像毒品一樣，用過就回不去了。

學習文件

Flex

Flex 在各個瀏覽器的支援性越來越普及，加上行動裝置的發展促成了響應式布局，自適應長寬彈性相當大的 Flex 就非常好用。

• 非常適合單向排版，例如導覽列、Gird-Layout
• 許多 CSS 框架也使用（Bootstrap、Foundation）
• 不適合做雙向排版

重點整理

Flex 的屬性教學，就請去參考上方文件，以下只列出裡面重點。

Flex 屬性可分成外層元素、內層元素，要根據容器設定。

Flex 外容器屬性：

• display，flex、inline-flex 必備屬性

• flex-flow

  • flex-direction，決定 flex 軸線
  • flex-wrap，決定換行的屬性

• justify-content，主要軸線的對齊

• align-items，交錯軸線的對齊

• align-content，整體的對齊

Flex 內元件屬性：

• flex

  • flex-grow：伸展比，其數值與其它物件可分配伸展比有關
  • flex-shrink：收縮比
  • flex-basis：絕對值

• align-self，單一個物件的交錯軸對齊

• order，排序