CSS Layout - 彈性盒子

Flex 是 CSS 中，用來對一個方向快速排列和對齊元素的排版方式，它的重點在於 彈性調整空間。

display

使用方式相當簡單，掌握幾個步驟:

1. 找出欲排列成水平或垂直的元素。
2. 呈上，找到之後對其父層元素進行 display: flex 的設定。
3. 接下來進行微調即可，包含: 方向、換行、對齊...等。

flex-direction

子層元素的排列方向。

• row：由左到右，從上到下，預設值。
• row-reverse: 與 row 相反。
• column：從上到下。
• column-reverse：與 column 相反。

flex-wrap

子層元素的換行排列狀態。

• nowrap: 不換行，預設值。
• wrap: 換行。
• wrap-reverse: 換行並反轉。

justify-content

子層元素的水平對齊方式。

• flex-start: 對齊最左邊。
• left: 對齊最左邊。
• flex-end: 對齊最右邊。
• right: 對齊最右邊。
• center: 水平置中。
• space-between: 頭、尾元素分別貼齊頁面的最左緣及最右緣，平均分配空間。
• space-around: 每個元素之間的空間相等。
• space-evenly: 平均分配空間。

align-items

子層元素的垂直對齊方式。

• flex-start: 靠上對齊。
• flex-end: 靠下對齊。
• center: 垂直置中。
• stretch: 元素全部撐開至 Flexbox 的高度，若子層元素有設定高度，則以各自的高度為主。
• baseline: 元素的文字基線對齊。

order

控制子層元素的順序。值越小，排列愈前面，且可以為負值。