一、排列方式
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