概述：bootstrap的flex布局基於Direction相關的兩個css flex-row 和 flex-column，flex-row是默認樣式。基於這兩個樣式，應用justify-content，align-items等樣式進行水平，垂直方向的對齊。
Direction: flex-row 和 flex-column確定了元素排列的方向，實驗如下：
.flex-row：讓元素水平排列
效果如下：
.flex-column：讓元素垂直排列
效果如下：
當Direction設置為 .flex-row 時
justify-content（內容整理）：設置元素在水平方向上 (X軸) 的分布
.justify-content-start：靠左排列
.justify-content-end：靠右排列
.justify-content-center：居中排列
.justify-content-between：中間元素平均分布
.justify-content-around：所有元素平均分布
效果如下：
align-items ：設置元素在垂直方向的（Y軸）定位
.align-items-start：靠頂部排列
.align-items-end：靠底部排列
.align-items-center：居中排列
.align-items-baseline：
.align-items-stretch：垂直拉伸布滿父容器
效果如下：
align-self：單獨設置某個元素的垂直定位
效果如下：
flex-fill：設置元素 水平拉伸
效果如下：
當Direction設置為 .flex-column 時，以上反之。