Bootstrap 4 Flex（弹性）布局
Bootstrap 4 通过 flex 类来控制页面的布局。
弹性盒子(flexbox)
Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。
弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计。
注意：IE9 及其以下版本不支持弹性盒子，所以如果你需要兼容 IE8-9，请使用 Bootstrap 3。
以下实例使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：
效果：
Flex
使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：
Flex item 1
Flex item 2
Flex item 3
创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类：
效果：
行内 Flex
创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类：
Flex item 1
Flex item 2
Flex item 3
水平方向
.flex-row 可以设置弹性子元素水平显示，这是默认的。
使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。
效果：
水平方向
使用 .flex-row 类设置弹性子元素水平显示：
Flex item 1
Flex item 2
Flex item 3
.flex-row-reverse 设置右对齐方向:
Flex item 1
Flex item 2
Flex item 3
垂直方向
.flex-column 类用于设置弹性子元素垂直方向显示，.flex-column-reverse 用于翻转子元素：
效果：
垂直方向
.flex-column 类用于设置弹性子元素垂直方向显示：
Flex item 1
Flex item 2
Flex item 3
.flex-column-reverse 类用于设置弹性子元素垂直方向翻转显示：
Flex item 1
Flex item 2
Flex item 3
内容排列
.justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或
around：
效果：
内容排列方式
.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
等宽
.flex-fill 类强制设置各个弹性子元素的宽度是一样的：
效果：
等宽
.flex-fill 类强制设置各个弹性子元素的宽度是一样的：
Flex item 1
Flex item 2
Flex item 3
不使用 .flex-fill 类实例：
Flex item 1
Flex item 2
Flex item 3
扩展
.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
提示：使用 .flex-shrink-1 用于设置子元素的收缩规则。
排序
.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前) ：
效果：
排序
.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高：
Flex item 1
Flex item 2
Flex item 3
外边距
.mr-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto !important;，.ml-auto
类可以设置子元素左外边距为
auto，即 margin-left: auto !important;
效果：
外边距
.mr-auto 类可以设置子元素右外边距为 auto，.ml-auto 类可以设置子元素左外边距为 auto。
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
包裹
弹性容器中包裹子元素可以使用以下三个类：.flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex
容器是单行或者多行。
效果：
包裹
弹性容器中包裹弹性子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse：
.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 item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25
.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 item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25
.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
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25
Flex item 26
Flex item 27
Flex item 28
Flex item 29
Flex item 30
Flex item 31
Flex item 32
Flex item 33
Flex item 34
Flex item 35
内容对齐
我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认),
.align-content-end, .align-content-center, .align-content-between, .align-content-around 和
.align-content-stretch。
这些类在只有一行的弹性子元素中是无效的。
效果：
内容对齐
我们可以使用 .align-content-* 来控制子元素在垂直方向的对齐方式。
注意： 这个实例在小型设备上效果不好。这些类在只有一行的弹性子元素中是无效的。
.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
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25
.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
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25
.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
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25
.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
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25
.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
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25
子元素对齐
如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：.align-items-start,
.align-items-end,
.align-items-center, .align-items-baseline, 和 .align-items-stretch (默认)。
效果：
子元素对齐
如果要设置单行的子元素对齐可以使用 .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
指定子元素对齐
如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：.align-self-start, .align-self-end,
.align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)。
效果：
Align Self
如果要设置指定子元素对齐对齐可以使用 .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
响应式 flex 类
我们可以根据不同的设备，设置 flex 类，从而实现页面响应式布局，以下表格中的 * 号可以的值有：sm, md, lg 或
xl，对应的是小型设备、中型设备，大型设备，超大型设备。
弹性容器
.d-*-flex
根据不同的屏幕设备创建弹性盒子容器。
效果：
Flex
根据不同的屏幕设备创建弹性盒子容器, d-*-flex 类可以控制弹性元素的布局。
重置浏览器查看效果。
d-flex
d-sm-flex
d-md-flex
d-lg-flex
d-xl-flex
.d-*-inline-flex
根据不同的屏幕设备创建行内弹性盒子容器。
效果：
行内 Flex
根据不同的屏幕设备创建行内弹性盒子容器, d-*-inline-flex 类可以控制弹性元素的布局。
重置浏览器查看效果。
d-flex
d-sm-flex
d-md-flex
d-lg-flex
d-xl-flex
方向
.flex-*-row
根据不同的屏幕设备在水平方向显示弹性子元素。
效果：
水平方向
.flex-row 可以设置弹性子元素水平显示(默认)。
使用 .flex-sm|md|lg|xl-row 可以适应不同屏幕设置。重置浏览器查看效果。
flex-row：
Flex item 1
Flex item 2
Flex item 3
flex-sm-row：
Flex item 1
Flex item 2
Flex item 3
flex-md-row：
Flex item 1
Flex item 2
Flex item 3
flex-lg-row：
Flex item 1
Flex item 2
Flex item 3
flex-xl-row：
Flex item 1
Flex item 2
Flex item 3
.flex-*-row-reverse
根据不同的屏幕设备在水平方向显示弹性子元素，且右对齐。
效果：
水平方向
.flex-row 可以设置弹性子元素水平显示(默认)。
使用 .flex-row-reverse 可以设置右对齐，使用 .flex-sm|md|lg|xl-row-reverse 可以适应不同屏幕设置。重置浏览器查看效果。
flex-row-reverse：
Flex item 1
Flex item 2
Flex item 3
flex-sm-row-reverse：
Flex item 1
Flex item 2
Flex item 3
flex-md-row-reverse：
Flex item 1
Flex item 2
Flex item 3
flex-lg-row-reverse：
Flex item 1
Flex item 2
Flex item 3
flex-xl-row-reverse：
Flex item 1
Flex item 2
Flex item 3
.flex-*-column
根据不同的屏幕设备在垂直方向显示弹性子元素。
效果：
垂直方向
.flex-column 类用于设置弹性子元素垂直方向显示。
使用 .flex-sm|md|lg|xl-column 可以适应不同屏幕设置。重置浏览器查看效果。
.flex-column：
Flex item 1
Flex item 2
Flex item 3
.flex-sm-column：
Flex item 1
Flex item 2
Flex item 3
.flex-md-column：
Flex item 1
Flex item 2
Flex item 3
.flex-lg-column：
Flex item 1
Flex item 2
Flex item 3
.flex-xl-column：
Flex item 1
Flex item 2
Flex item 3
.flex-*-column-reverse
根据不同的屏幕设备在垂直方向显示弹性子元素，且方向相反。
效果：
垂直方向
.flex-column 类用于设置弹性子元素垂直方向显示。
使用 .flex-column-reverse 可以适应不同屏幕设置反向垂直子元素布局。重置浏览器查看效果。
.flex-column-reverse：
Flex item 1
Flex item 2
Flex item 3
.flex-sm-column-reverse：
Flex item 1
Flex item 2
Flex item 3
.flex-md-column-reverse：
Flex item 1
Flex item 2
Flex item 3
.flex-lg-column-reverse：
Flex item 1
Flex item 2
Flex item 3
.flex-xl-column-reverse：
Flex item 1
Flex item 2
Flex item 3
内容对齐
.justify-content-*-start
根据不同屏幕设备在开始位置显示弹性子元素 (左对齐)。
效果：
内容排列
.justify-content-*-start 类是在不同屏幕上在从开始位置 (左对齐) 上显示子元素。注意：左对齐是默认的。
.justify-content-start：
Flex item 1
Flex item 2
Flex item 3
.justify-content-sm-start：
Flex item 1
Flex item 2
Flex item 3
.justify-content-md-start：
Flex item 1
Flex item 2
Flex item 3
.justify-content-lg-start：
Flex item 1
Flex item 2
Flex item 3
.justify-content-xl-start：
Flex item 1
Flex item 2
Flex item 3
.justify-content-*-end
根据不同屏幕设备在尾部显示弹性子元素 (右对齐)。
效果：
内容排列
.justify-content-*-end 类是在不同屏幕上在从结束位置 (右对齐) 上显示子元素。
重置浏览器窗口，查看效果。
.justify-content-end：
Flex item 1
Flex item 2
Flex item 3
.justify-content-sm-end：
Flex item 1
Flex item 2
Flex item 3
.justify-content-md-end：
Flex item 1
Flex item 2
Flex item 3
.justify-content-lg-end：
Flex item 1
Flex item 2
Flex item 3
.justify-content-xl-end：
Flex item 1
Flex item 2
Flex item 3
.justify-content-*-center
根据不同屏幕设备在 flex 容器中居中显示子元素。
效果：
内容排列
.justify-content-*-center 类根据不同屏幕设备在 flex 容器中居中显示子元素。
重置浏览器窗口，查看效果。
.justify-content-center：
Flex item 1
Flex item 2
Flex item 3
.justify-content-sm-center：
Flex item 1
Flex item 2
Flex item 3
.justify-content-md-center：
Flex item 1
Flex item 2
Flex item 3
.justify-content-lg-center：
Flex item 1
Flex item 2
Flex item 3
.justify-content-xl-center：
Flex item 1
Flex item 2
Flex item 3
.justify-content-*-between
根据不同屏幕设备使用 "between" 显示弹性子元素。
效果：
内容排列
.justify-content-*-between 根据不同屏幕设备使用 "between" 显示弹性子元素。
重置浏览器窗口，查看效果。
.justify-content-between：
Flex item 1
Flex item 2
Flex item 3
.justify-content-sm-between：
Flex item 1
Flex item 2
Flex item 3
.justify-content-md-between：
Flex item 1
Flex item 2
Flex item 3
.justify-content-lg-between：
Flex item 1
Flex item 2
Flex item 3
.justify-content-xl-between：
Flex item 1
Flex item 2
Flex item 3
.justify-content-*-around
根据不同屏幕设备使用 "around" 显示弹性子元素。
效果：
内容排列
.justify-content-*-around 根据不同屏幕设备使用 "around" 显示弹性子元素。
重置浏览器窗口大小，查看效果。
.justify-content-around：
Flex item 1
Flex item 2
Flex item 3
.justify-content-sm-around：
Flex item 1
Flex item 2
Flex item 3
.justify-content-md-around：
Flex item 1
Flex item 2
Flex item 3
.justify-content-lg-around：
Flex item 1
Flex item 2
Flex item 3
.justify-content-xl-around：
Flex item 1
Flex item 2
Flex item 3
等宽
.flex-*-fill
根据不同的屏幕设备强制等宽。
效果：
等宽
.flex-fill 类强制设置各个弹性子元素的宽度是一样的，.flex-*-fill 可以根据不同屏幕设备设置。
重置浏览器窗口大小，查看效果。
.flex-fill：
Flex item 1
Flex item 2
Flex item 3
.flex-sm-fill：
Flex item 1
Flex item 2
Flex item 3
.flex-md-fill：
Flex item 1
Flex item 2
Flex item 3
.flex-lg-fill：
Flex item 1
Flex item 2
Flex item 3
.flex-xl-fill：
Flex item 1
Flex item 2
Flex item 3