指定子元素对齐
如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)。
实例
尝试一下 »
响应式 flex 类
我们可以根据不同的设备，设置 flex 类，从而实现页面响应式布局，以下表格中的 号可以的值有：sm, md, lg 或 xl, 对应的是小型设备、中型设备，大型设备，超大型设备。
类 实例 实现
弹性容器
.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 根据不同屏幕设备，通过伸展元素来堆叠 尝试一下
排序
.order--0-12 在小屏幕尺寸上修改排序 尝试一下
元素对齐
.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 据不同屏幕设备，延展一个单独子元素
