將需要使用flex排版屬性的元素其父元素上加上display: flex，並加入其他屬性，便能改變其方向及對齊方式：（ bootstrap的grid system裡的row預設已加入display: flex）
Flex
．display: 必備屬性
1. d-flex 撐滿外部容器
2. d-inline-flex 貼齊內部元素
Direction
1. flex-row（由左至右排列 default預設）
2. flex-column （由上至下排列，且內部元素左右撐滿）
3. 上述兩個屬性加上reverse後排列方式反轉
4. flex-(size)-row / flex-(size)-column 響應式屬性
Justify content
1. justify-content-start（對齊主軸線起點）
2. justify-content-end（對齊主軸線終點）
3. justify-content-center（對齊主軸線中間點）
4. justify-content-between（平均分配物件的空間，並左右貼齊）
5. justify-content-around（平均分配物件的空間，左右再留一半空間）
6. 響應式屬性justify-content-(size)-屬性值
Align items
1. align-items-start（對齊交錯線起點）
2. align-items-end（對齊交錯線終點）
3. align-items-center（對齊交錯線中間點）
4. align-items-baseline（依照文字基準線做排列）
5. align-items-stretch（伸展撐滿交錯軸）
6. 響應式屬性align-items-(size)-屬性值
Align self
使用 align-self- 可單獨改變在橫軸上的對齊（y 軸開始，如果 flex-direction: column，則為 x 軸）。此屬性加在需要調整的flex內層元素上。
1. align-self-start（特定元件對齊交錯線起點）
2. align-self-end（特定元件對齊交錯線終點）
3. align-self-center（特定元件對齊交錯線中間點）
4. align-self-baseline（特定元件依照文字基準線做排列）
5. align-self-stretch（特定元件伸展撐滿交錯軸）
6. 響應式屬性align-self-(size)-屬性值
小結
看似複雜，但其實就是分為主軸與交錯軸（兩者位置可互換）的排列方式，來對齊上下左右、中間或平均分配。所有物件一同對齊或特定物件自己對齊，並可加入響應式斷點，在不同裝置上改變他的排列方式。
