Flex
类名
说明
.flex-row
设置子元素水平显示，默认的
.flex-colum
设置子元素垂直方向显示
.flex-row-reverse
右对齐显示
.flex-colum-reverse
垂直方向反转子元素
.flex-warp
设置flex容器为多行
.flex-nowrap
设置flex容器为单行
.flex-wrap-reverse
反转wrap排列
.flex-fill
为每个弹性子元素设置时，子元素宽度相等
.flex-grow-0
定义弹性子元素扩展比率为0
.flex-grow-1
定义弹性子元素扩展比率为1
.flex-shrink-0
定义弹性子元素收缩比率为0
.flex-shrink-1
定义弹性子元素收缩比率为1
.justify-content-start
弹性盒子子元素将向行起始位置对齐
.justify-content-end
弹性盒子子元素将向行结束位置对齐
.justify-content-center
弹性盒子子元素将向中间对齐
.justify-content-between
弹性盒子子元素会平均地分布在行里
.justify-content-around
弹性盒子元素会平均地分布在行里，并且两端保留子元素与子元素之间间距大小的一半
.align-items-start
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
.align-items-end
弹性盒子元素的侧轴（纵轴）结束位置的边界紧靠住该行的侧轴结束边界。
.align-items-center
弹性盒子元素在该行的侧轴（纵轴）上居中放置。
.align-items-baseline
如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
.align-items-stretch
如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
.align-content-start
各行向弹性盒容器的起始位置堆叠。
.align-content-end
各行向弹性盒容器的结束位置堆叠。
.align-content-center
各行向弹性盒容器的中间位置堆叠。
.align-content-between
各行在弹性盒容器中平均分布。
.align-content-around
各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
.align-content-stretch
各行将会伸展以占用剩余的空间。
.align-self-auto
其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
.align-self-start
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
.align-self-end
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
.align-self-center
弹性盒子元素在该行的侧轴（纵轴）上居中放置
.align-self-baseline
如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
.align-self-stretch
如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
响应式flex布局
可为不同宽度的屏幕指定不同的模式：
576px < 小屏幕(sm) < 768px < 中型屏幕(md) < 992px < 大型屏幕(lg) < 1200px < 超大型屏幕(xl)
以上各属性分别表示为（以sm为例）：
.flex-sm-*
.justify-content-sm-*
.align-items-sm-*
.align-content-sm-*
.align-self-sm-*