一、排列方式
align-middle
1.1 水平方向排列
# 從左向右
.flex-{sm|md|lg|xl}-row
# 從右向左
.flex-{sm|md|lg|xl}-row-reverse
1.2 垂直方向排列
# 從上向下
.flex-{sm|md|lg|xl}-column
# 從下向上
.flex-{sm|md|lg|xl}-column-reverse
1.3 內容水平排列
# 位於容器開頭
justify-content-start
# 位於容器中心
justify-content-center
# 位於容器結尾
justify-content-end
# 分布，中間有空白
justify-content-between
# 分布，中間和兩邊都有空白
justify-content-around
1.4 內容垂直排列
# 靠上
.align-items-{sm|md|lg|xl|}-start
# 居中
.align-items-{sm|md|lg|xl|}-center
# 靠下
.align-items-{sm|md|lg|xl|}-end
# 占滿高度靠上
.align-items-{sm|md|lg|xl|}-stretch
1.5 自動相等
# 在一系列子元素中使用.flex-fill類，來強制它們平分剩下的空間
.flex-{sm|md|lg|xl}-fill
1.6 文本對齊
圖片亦可用此進行對齊。
# 左對齊
.text-left
# 右對齊
.text-right
# 居中對齊
.text-center
# 兩端對齊
.text-justify