响应式 flex 类

类	实例
弹性容器
.d-*-flex	根据不同的屏幕设备创建弹性盒子容器
.d-*-inline-flex	根据不同的屏幕设备创建行内弹性盒子容器
方向
.flex-*-row	根据不同的屏幕设备在水平方向显示弹性子元素
.flex-*-row-reverse	根据不同的屏幕设备在水平方向显示弹性子元素，且右对齐
.flex-*-column	根据不同的屏幕设备在垂直方向显示弹性子元素
.flex-*-column-reverse	根据不同的屏幕设备在垂直方向显示弹性子元素，且方向相反
内容对齐
.justify-content-*-start	根据不同屏幕设备在开始位置显示弹性子元素 (左对齐)
.justify-content-*-end	根据不同屏幕设备在尾部显示弹性子元素 (右对齐)
.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	根据不同屏幕设备，让元素在中间位置显示在同一行。
.align-items-*-baseline	根据不同屏幕设备，让元素在基线上显示在同一行。
.align-items-*-stretch	根据不同屏幕设备，让元素延展高度并显示在同一行。
单独一个子元素的对齐方式
.align-self-*-start	据不同屏幕设备，让单独一个子元素显示在头部。
.align-self-*-end	据不同屏幕设备，让单独一个子元素显示在尾部
.align-self-*-center	据不同屏幕设备，让单独一个子元素显示在居中位置
.align-self-*-baseline	据不同屏幕设备，让单独一个子元素显示在基线位置
.align-self-*-stretch	据不同屏幕设备，延展一个单独子元素