Flex 容器

display

啟用 Flexbox， inline 或者 block

display: flex

display: inline-flex

flex-direction

指定 Flex 主軸的方向

flex-direction: row (預設)

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

flex-wrap

指定元素是否應該換行

flex-wrap: nowrap (預設)

flex-wrap: wrap

flex-wrap: wrap-reverse

justify-content

在 主軸 上對齊元素

justify-content: flex-start (預設)

justify-content: flex-end

justify-content: center

justify-content: space-between
頭尾黏在邊緣，間距等寬

justify-content: space-around
頭尾一半間距到邊緣，間距等寬

justify-content: space-evenly
頭尾有間距，所有間距等寬

align-items

決定元素在 交叉軸 上的對齊方式
Flex 容器有設定高度才真正有用

align-items: flex-start

align-items: flex-end

align-items: center

align-items: baseline
將所有(高高低低)元素的基線對齊

align-items: stretch (預設)
填滿 Flex 容器全高

align-content

控制多行之間在 交叉軸 的對齊方式
僅對多行內容有效 (wrap | wrap-reverse)

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-between

align-content: space-around

align-content: stretch (default)

Flex 元素

flex-basis

控制元素在主軸上的初始大小
預設時元素將根據內容自動調整大小

第一個元素 20%, 第二個元素 40%
flex-basis: 0|50px|50%|content (預設: auto)

flex-grow

控制元素在主軸上的伸展比例
值越大，元素在主軸上佔的空間越多

flex-grow: 1 (套用到所有元素，幾乎忽視 flex-basis 限制)
(預設: 0)

flex-grow (1, 2, and 3)

flex-shrink

控制元素在主軸上的收縮比例
值越大，元素在主軸的收縮比例越小

只有在設定 尺寸 或設定 flex-basis 才真正有用 (預設: 1)

order

設定每個元素在主軸出現的順序
數字越大越晚出現

order: 整數 (預設: 0)

align-self

設定單一元素在交叉軸上的對齊方式
auto 時，繼承 align-items 屬性或 stretch

align-self: 同 align-items
(預設: auto)