Bootstrap 4 Flex（弹性）布局

释放双眼，带上耳机，听听看~！

一、Bootstrap Flex（弹性）布局

1.1 弹性盒子(flexbox)

Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。
弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计。
注意：IE9 及其以下版本不支持弹性盒子，所以如果你需要兼容 IE8-9，请使用 Bootstrap 3。

以下实例使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素


1
2
3
4
5
6
7
8
9
10
11
1&lt;div class=&quot;container mt-3&quot;&gt;

2  &lt;h2&gt;Flex&lt;/h2&gt;

3  &lt;p&gt;使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：&lt;/p&gt;

4  &lt;div class=&quot;d-flex p-3 bg-secondary text-white&quot;&gt;  

5    &lt;div class=&quot;p-2 bg-info&quot;&gt;Flex item 1&lt;/div&gt;

6    &lt;div class=&quot;p-2 bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

7    &lt;div class=&quot;p-2 bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

8  &lt;/div&gt;

9&lt;/div&gt;

10

11

1.2 显示在同一行上的弹性盒子容器

创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类:


1
2
3
4
5
6
7
8
9
10
11
1&lt;div class=&quot;container mt-3&quot;&gt;

2  &lt;h2&gt;行内 Flex&lt;/h2&gt;

3  &lt;p&gt;创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类:&lt;/p&gt;

4  &lt;div class=&quot;d-inline-flex p-3 bg-secondary text-white&quot;&gt;  

5    &lt;div class=&quot;p-2 bg-info&quot;&gt;Flex item 1&lt;/div&gt;

6    &lt;div class=&quot;p-2 bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

7    &lt;div class=&quot;p-2 bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

8  &lt;/div&gt;

9&lt;/div&gt;

10

11

1.3 水平方向

.flex-row 可以设置弹性子元素水平显示，这是默认的。
使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1&lt;div class=&quot;container mt-3&quot;&gt;

2  &lt;h2&gt;水平方向&lt;/h2&gt;

3  &lt;p&gt;使用 .flex-row 类设置弹性子元素水平显示：&lt;/p&gt;

4  &lt;div class=&quot;d-flex flex-row bg-secondary mb-3&quot;&gt;

5    &lt;div class=&quot;p-2 bg-info&quot;&gt;Flex item 1&lt;/div&gt;

6    &lt;div class=&quot;p-2 bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

7    &lt;div class=&quot;p-2 bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

8  &lt;/div&gt;

9  &lt;p&gt;.flex-row-reverse 设置右对齐方向:&lt;/p&gt;

10  &lt;div class=&quot;d-flex flex-row-reverse bg-secondary&quot;&gt;

11    &lt;div class=&quot;p-2 bg-info&quot;&gt;Flex item 1&lt;/div&gt;

12    &lt;div class=&quot;p-2 bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

13    &lt;div class=&quot;p-2 bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

14  &lt;/div&gt;

15&lt;/div&gt;

16

17

1.4 垂直方向

.flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素：


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1&lt;div class=&quot;container mt-3&quot;&gt;

2  &lt;h2&gt;垂直方向&lt;/h2&gt;

3  &lt;p&gt;.flex-column 类用于设置弹性子元素垂直方向显示：&lt;/p&gt;

4  &lt;div class=&quot;d-flex flex-column mb-3&quot;&gt;

5    &lt;div class=&quot;p-2 bg-info&quot;&gt;Flex item 1&lt;/div&gt;

6    &lt;div class=&quot;p-2 bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

7    &lt;div class=&quot;p-2 bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

8  &lt;/div&gt;

9  &lt;p&gt;.flex-column-reverse 类用于设置弹性子元素垂直方向翻转显示：&lt;/p&gt;

10  &lt;div class=&quot;d-flex flex-column-reverse&quot;&gt;

11    &lt;div class=&quot;p-2 bg-info&quot;&gt;Flex item 1&lt;/div&gt;

12    &lt;div class=&quot;p-2 bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

13    &lt;div class=&quot;p-2 bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

14  &lt;/div&gt;

15&lt;/div&gt;

16

17

1.5 内容排列

.justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1&lt;div class=&quot;container mt-3&quot;&gt;

2  &lt;h2&gt;内容排列方式&lt;/h2&gt;

3  &lt;p&gt; .justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around:&lt;/p&gt;

4  &lt;div class=&quot;d-flex justify-content-start bg-secondary mb-3&quot;&gt;

5    &lt;div class=&quot;p-2 bg-info&quot;&gt;Flex item 1&lt;/div&gt;

6    &lt;div class=&quot;p-2 bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

7    &lt;div class=&quot;p-2 bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

8  &lt;/div&gt;

9  &lt;div class=&quot;d-flex justify-content-end bg-secondary mb-3&quot;&gt;

10    &lt;div class=&quot;p-2 bg-info&quot;&gt;Flex item 1&lt;/div&gt;

11    &lt;div class=&quot;p-2 bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

12    &lt;div class=&quot;p-2 bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

13  &lt;/div&gt;

14  &lt;div class=&quot;d-flex justify-content-center bg-secondary mb-3&quot;&gt;

15    &lt;div class=&quot;p-2 bg-info&quot;&gt;Flex item 1&lt;/div&gt;

16    &lt;div class=&quot;p-2 bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

17    &lt;div class=&quot;p-2 bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

18  &lt;/div&gt;

19  &lt;div class=&quot;d-flex justify-content-between bg-secondary mb-3&quot;&gt;

20    &lt;div class=&quot;p-2 bg-info&quot;&gt;Flex item 1&lt;/div&gt;

21    &lt;div class=&quot;p-2 bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

22    &lt;div class=&quot;p-2 bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

23  &lt;/div&gt;

24  &lt;div class=&quot;d-flex justify-content-around bg-secondary mb-3&quot;&gt;

25    &lt;div class=&quot;p-2 bg-info&quot;&gt;Flex item 1&lt;/div&gt;

26    &lt;div class=&quot;p-2 bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

27    &lt;div class=&quot;p-2 bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

28  &lt;/div&gt;

29&lt;/div&gt;

30

31

1.6 等宽

.flex-fill 类强制设置各个弹性子元素的宽度是一样的:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1&lt;div class=&quot;container mt-3&quot;&gt;

2  &lt;h2&gt;等宽&lt;/h2&gt;

3  &lt;p&gt;.flex-fill 类强制设置各个弹性子元素的宽度是一样的:&lt;/p&gt;

4  &lt;div class=&quot;d-flex mb-3&quot;&gt;

5    &lt;div class=&quot;p-2 flex-fill bg-info&quot;&gt;Flex item 1&lt;/div&gt;

6    &lt;div class=&quot;p-2 flex-fill bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

7    &lt;div class=&quot;p-2 flex-fill bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

8  &lt;/div&gt;

9  &lt;p&gt;不使用 .flex-fill 类实例:&lt;/p&gt;

10  &lt;div class=&quot;d-flex mb-3 bg-secondary&quot;&gt;

11    &lt;div class=&quot;p-2 bg-info&quot;&gt;Flex item 1&lt;/div&gt;

12    &lt;div class=&quot;p-2 bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

13    &lt;div class=&quot;p-2 bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

14  &lt;/div&gt;

15&lt;/div&gt;

16

17

==1.7 扩展 ==

.flex-grow-1 用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。 :
提示: 使用 .flex-shrink-1 用于设置子元素的收缩规则。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1&lt;div class=&quot;container mt-3&quot;&gt;

2  &lt;h2&gt;扩展&lt;/h2&gt;

3  &lt;p&gt;.flex-grow-1 用于设置子元素使用剩下的空间：&lt;/p&gt;

4  &lt;div class=&quot;d-flex mb-3&quot;&gt;

5    &lt;div class=&quot;p-2 bg-info&quot;&gt;Flex item 1&lt;/div&gt;

6    &lt;div class=&quot;p-2 bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

7    &lt;div class=&quot;p-2 flex-grow-1 bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

8  &lt;/div&gt;

9  &lt;p&gt;不使用 .flex-grow-1 实例:&lt;/p&gt;

10  &lt;div class=&quot;d-flex mb-3 bg-secondary&quot;&gt;

11    &lt;div class=&quot;p-2 bg-info&quot;&gt;Flex item 1&lt;/div&gt;

12    &lt;div class=&quot;p-2 bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

13    &lt;div class=&quot;p-2 bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

14  &lt;/div&gt;

15&lt;/div&gt;

16

17

1.8 排序

.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前) :


1
2
3
4
5
6
7
8
9
10
11
1&lt;div class=&quot;container mt-3&quot;&gt;

2  &lt;h2&gt;排序&lt;/h2&gt;

3  &lt;p&gt;.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高:&lt;/p&gt;

4  &lt;div class=&quot;d-flex mb-3&quot;&gt;

5    &lt;div class=&quot;p-2 order-3 bg-info&quot;&gt;Flex item 1&lt;/div&gt;

6    &lt;div class=&quot;p-2 order-2 bg-warning&quot;&gt;Flex item 2&lt;/div&gt;

7    &lt;div class=&quot;p-2 order-1 bg-primary&quot;&gt;Flex item 3&lt;/div&gt;

8  &lt;/div&gt;

9&lt;/div&gt;

10

11

==1. 9 外边距 ==

==1. ==

{{userData.name}}已认证

Bootstrap 4 Flex（弹性）布局

一、Bootstrap Flex（弹性）布局

加密算法

C++ 高性能服务器网络框架设计细节

{{userData.name}}已认证

一、Bootstrap Flex（弹性）布局

Related posts:

加密算法

C++ 高性能服务器网络框架设计细节

OpenSSL之Blowfish对称加密

md5 加密算法

RC4加密解密

dhcp软件安装脚本