Bootstrap 4 Flex（弹性）布局

.justify-content-*-center

根据不同屏幕设备在 flex 容器中居中显示子元素

.justify-content-*-between

根据不同屏幕设备使用 “between” 显示弹性子元素

.justify-content-*-around

根据不同屏幕设备使用 “around” 显示弹性子元素等宽

.flex-*-fill

根据不同的屏幕设备强制等宽扩展

.flex-*-grow-0

不同的屏幕设备不设置扩展 

.flex-*-grow-1

不同的屏幕设备设置扩展 收缩

.flex-*-shrink-0

不同的屏幕设备不设置收缩 

.flex-*-shrink-1

不同的屏幕设备设置收缩 包裹

.flex-*-nowrap

不同的屏幕设备不设置包裹元素

.flex-*-wrap

不同的屏幕设备设置包裹元素

.flex-*-wrap-reverse

不同的屏幕设备反转包裹元素内容排列

.align-content-*-start

根据不同屏幕设备在起始位置堆叠元素

.align-content-*-end

根据不同屏幕设备在结束位置堆叠元素

.align-content-*-center

根据不同屏幕设备在中间位置堆叠元素

.align-content-*-around

根据不同屏幕设备，使用 “around” 堆叠元素

.align-content-*-stretch

根据不同屏幕设备，通过伸展元素来堆叠元素对齐

.align-items-*-start

根据不同屏幕设备，让元素在头部显示在同一行。

.align-items-*-end

根据不同屏幕设备，让元素在尾部显示在同一行。

.align-items-*-center