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