Bootstrap4之弹性盒子详解（flexbox）
个人认为：弹性盒子是Bootstrap中比较重要同时理解也比较困难的一部分，接下来，我就根据自己的理解详细讲述一下对于弹性盒子的看法。
1 排序方式
1.1 水平排列
相关说明：弹性布局之后可以使元素水平排列，类似浮动效果。
主要代码：
水平方向
使用 .flex-row 类设置弹性子元素水平显示：
Flex item 1
Flex item 2
Flex item 3
.flex-row-reverse 设置右对齐方向:
Flex item 1
Flex item 2
Flex item 3
1.2 垂直排列
相关说明：弹性布局之后可以使元素垂直排列，类似设置行高效果，但是比行高的效果种类多。
主要代码：
垂直方向
.flex-column 类用于设置弹性子元素垂直方向显示：
Flex item 1
Flex item 2
Flex item 3
.flex-column-reverse 类用于设置弹性子元素垂直方向翻转显示：
Flex item 1
Flex item 2
Flex item 3
1.3 内容排列
相关说明：内容排列可以设置弹性盒子内子元素的位置，justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 和 around。
主要代码：
内容排列方式
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
1.4 权重排列
相关说明：.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高。
主要代码：
排序
Flex item 1
Flex item 2
Flex item 3
1.5 边距排列
相关说明：.mr-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto!important;.ml-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto!important。在有的场景中，.mr-auto可以替代.justify-content-between的效果。
主要代码：
外边距
.mr-auto 类可以设置子元素右外边距为 auto，.ml-auto 类可以设置子元素左外边距为 auto，
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
1.6 换行排列
包裹
.flex-wrap:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
.flex-wrap-reverse:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
.flex-nowrap:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
1.7 .flex-grow-1
相关说明：.flex-grow-1用于设置子元素使用剩下的空间。
主要代码：
扩展
.flex-grow-1 用于设置子元素使用剩下的空间：
Flex item 1
Flex item 2
Flex item 3
不使用 .flex-grow-1 实例:
Flex item 1
Flex item 2
Flex item 3
1.8 内容对齐
相关说明：我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。
这些类在只有一行的弹性子元素中是无效的。
主要代码：
内容对齐
.align-content-start:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
.align-content-end:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
.align-content-center:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
.align-content-around:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
.align-content-stretch:
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
1.9 子元素对齐
相关说明：如果要设置单行的子元素对齐可以使用 .align-content-* 类来控制。
主要代码：
子元素对齐
.align-items-start:
Flex item 1
Flex item 2
Flex item 3
.align-items-end:
Flex item 1
Flex item 2
Flex item 3
.align-items-center:
Flex item 1
Flex item 2
Flex item 3
.align-items-baseline:
Flex item 1
Flex item 2
Flex item 3
.align-items-stretch (默认):
Flex item 1
Flex item 2
Flex item 3
1.10 指定子元素对齐
相关说明：如果要设置指定子元素对齐可以使用 .align-self-* 类来控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)。
Align Self
.align-self-start:
Flex item 1
Flex item 2
Flex item 3
.align-self-end:
Flex item 1
Flex item 2
Flex item 3
.align-self-center:
Flex item 1
Flex item 2
Flex item 3
.align-self-baseline:
Flex item 1
Flex item 2
Flex item 3
.align-self-stretch (默认):
Flex item 1
Flex item 2
Flex item 3
2 响应式布局
2.1 总的来说
响应式布局主要是在弹性盒子的基础上添加屏幕大小属性，.d-*-flex根据不同的屏幕设备创建弹性盒子容器，*号的值有：sm, md, lg 或 xl, 对应的是小型设备、中型设备，大型设备，超大型设备。