学习Bootstrap 5的第十六天

正在奋斗的程序猿

已于 2023-10-30 10:14:25 修改

阅读量259

点赞数 2

分类专栏： Bootstrap 文章标签：学习前端 bootstrap

于 2023-10-30 10:14:10 首次发布

本文链接：https://blog.csdn.net/m0_74293254/article/details/134111642

版权

Bootstrap 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

Flex（弹性）布局

弹性盒子(flexbox)

Bootstrap 3 和 Bootstrap 4 & 5 的最大区别在于 Bootstrap 5 现在使用 flexbox 而不是浮动来处理布局。

弹性的框布局模块，可以更轻松地设计弹性响应式布局结构，而无需使用浮动或定位。

注意：IE9 及更早版本不支持 Flexbox。如果需要 IE8-9 支持，请使用 Bootstrap 3。它是最稳定的 Bootstrap 版本，团队仍然支持它进行关键错误修复和文档更改。但是不会向其中添加任何新功能。

在 Bootstrap 5 中，d-flex 类表示使用 Flexbox 布局的容器类。它可以将直接子项转换为 flex 项，并且具有许多其他的可选项。同时，Bootstrap 5 也提供了一个用于创建行内 Flexbox 容器的类，即 d-inline-flex 类。

与 d-flex 类相似，d-inline-flex 类可以将直接子项转换为 flex 项，并且具有与 d-flex 类相同的可选项。但是，它使用行内布局方式而不是块级布局方式。这意味着，在使用 d-inline-flex 类创建行内 Flexbox 容器时，容器和其中的 flex 项都将以行内元素的方式呈现。

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<p>使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：</p>
			<div class="d-flex p-3 bg-secondary text-white">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div><br />
			<p>创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类:</p>
			<div class="d-inline-flex p-3 bg-secondary text-white">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

总的来说，Bootstrap 5 的引入弹性框布局是一个非常不错的改变，它使得布局的设计更加方便灵活，可以更好地应对不同尺寸设备的要求。

水平方向

在 Bootstrap 5 中使用.flex-row类可以将弹性子元素水平显示，默认情况下是从左到右水平排列的。

此外，Bootstrap 5 还提供了 .flex-row-reverse 类，用于将弹性子元素以右对齐的方式显示，即与 .flex-row 方向相反。通过添加 .flex-row-reverse 类，弹性子元素将从右到左水平排列。

例如，下面的代码示例展示了如何使用 .flex-row 和 .flex-row-reverse 类来设置弹性子元素的水平显示方向：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<div class="d-flex flex-row bg-secondary">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div><br />
			<div class="d-flex flex-row-reverse bg-secondary">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

在第一个示例中，弹性子元素将从左到右水平显示。在第二个示例中，弹性子元素将从右到左水平显示。

垂直方向

在 Bootstrap 5 中使用 .flex-column 类可以将弹性子元素垂直显示，默认情况下是从上到下垂直排列的。

除了 .flex-column 外，Bootstrap 5 还提供了 .flex-column-reverse 类，用于将弹性子元素以反向的垂直方式显示，即与 .flex-column 方向相反。通过添加 .flex-column-reverse 类，弹性子元素将从下到上垂直排列。

例如，下面的代码示例展示了如何使用 .flex-column 和 .flex-column-reverse 类来设置弹性子元素的垂直显示方向：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<div class="d-flex flex-column">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
			<br />
			<div class="d-flex flex-column-reverse">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

在第一个示例中，弹性子元素将从上到下垂直显示。在第二个示例中，弹性子元素将从下到上垂直显示。

对齐内容

在 Bootstrap 5 中可以使用.justify-content-*类来改变弹性项目的对齐方式。

以下是可用的.justify-content-*类及其作用：

.justify-content-start：将弹性项目左对齐（默认值）。
.justify-content-end：将弹性项目右对齐。
.justify-content-center：将弹性项目居中对齐。
.justify-content-between：将弹性项目平均分布在容器内，左右两端没有间距。
.justify-content-around：将弹性项目平均分布在容器内，左右两端有相等的间距。

您可以根据需要选择适当的.justify-content-*类来实现所需的对齐效果。

例如，下面的代码示例展示了如何使用不同的.justify-content-*类来改变弹性项目的对齐方式：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<div class="d-flex justify-content-start bg-secondary mb-3">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
			<div class="d-flex justify-content-end bg-secondary mb-3">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
			<div class="d-flex justify-content-center bg-secondary mb-3">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
			<div class="d-flex justify-content-between bg-secondary mb-3">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
			<div class="d-flex justify-content-around bg-secondary mb-3">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

等宽

在 Flex 项目上使用.flex-fill类可以强制它们等宽。

.flex-fill类用于填充剩余的可用空间，并让 Flex 项目等宽。这意味着所有的 Flex 项目将以相同的宽度显示，无论它们的内容有多长。

以下是如何使用.flex-fill类来使 Flex 项目等宽的示例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<div class="d-flex">
				<div class="p-2 bg-info flex-fill">弹性项目 1</div>
				<div class="p-2 bg-warning flex-fill">弹性项目 2</div>
				<div class="p-2 bg-primary flex-fill">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

在上述示例中，三个 Flex 项目都使用了.flex-fill类，它们将平均分配可用的空间，并呈现等宽。

伸展

在 Flex 项目上使用.flex-grow-1类可以使其占用多余的空间。

.flex-grow-*类用于控制 Flex 项目在可用空间超过它们所需的空间时的扩展性。当设置为.flex-grow-1时，Flex 项目将占用剩余的空间，并填充可用的空间。如果有多个.flex-grow-1的 Flex 项目，则它们将平均分配剩余的空间。

提示：在 flex 项目上使用 .flex-shrink-1 可使其在必要时收缩。

以下是如何使用.flex-grow-1类来占用多余空间的示例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<div class="d-flex">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary flex-grow-1">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

在上述示例中，前两个 Flex 项目没有使用.flex-grow-1类，它们仅占用其所需的空间。然而，第三个 Flex 项目使用了.flex-grow-1类，因此它将占用剩余的空间，并填充可用的空间。

顺序

使用.order类可以更改特定 Flex 项目的视觉顺序。

.order-*类用于控制 Flex 项目的顺序。从 .order-1 到 .order-12，数字越小，优先级越高，即数字越小的.order-*类将在数字较大的.order-*类之前显示。

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<div class="d-flex bg-secondary">
				<div class="p-2 bg-info order-3">弹性项目 1</div>
				<div class="p-2 bg-warning order-2">弹性项目 2</div>
				<div class="p-2 bg-primary order-1">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

在上述示例中，通过.order-*类，我们可以改变 Flex 项目的显示顺序。弹性项目 1被设置为order-2，弹性项目 2被设置为order-1，弹性项目 3被设置为order-3。这样，弹性项目 2将显示在弹性项目 1的前面，而弹性项目 3将显示在最后。

自动外边距

使用.ms-auto和.me-auto类可以为弹性项目添加自动外边距。

.ms-auto和.me-auto类用于在弹性容器中将项目向右或向左推，以实现自动外边距的效果。它们分别表示"margin-start:auto"和"margin-end:auto"。

以下是如何使用.ms-auto和.me-auto类为弹性项目添加自动外边距的示例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<div class="d-flex bg-secondary">
				<div class="p-2 ms-auto bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 bg-primary">弹性项目 3</div>
			</div>
			<br />
			<div class="d-flex bg-secondary">
				<div class="p-2 bg-info">弹性项目 1</div>
				<div class="p-2 bg-warning">弹性项目 2</div>
				<div class="p-2 me-auto bg-primary">弹性项目 3</div>
			</div>
		</div>
	</body>
</html>

包裹

使用.flex-nowrap、.flex-wrap和.flex-wrap-reverse类可以控制弹性容器中子元素的包裹方式。

这三个类用于设置弹性容器中子元素的包裹方式：

.flex-nowrap是默认值，它表示所有子元素将放在一行上，不会自动换行。
.flex-wrap表示子元素将被包裹成多行。如果需要，子元素将向下自动换行，并尽可能占满所有可用的垂直空间。
.flex-wrap-reverse与.flex-wrap类似，但是子元素是从右往左堆叠，而不是从左往右。

以下是如何使用.flex-nowrap、.flex-wrap和.flex-wrap-reverse类来设置弹性容器中子元素的包裹方式的示例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<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 class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</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 class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</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 class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</div>
				<div class="p-2 border">Flex item 26</div>
				<div class="p-2 border">Flex item 27</div>
				<div class="p-2 border">Flex item 28</div>
				<div class="p-2 border">Flex item 29</div>
				<div class="p-2 border">Flex item 30</div>
				<div class="p-2 border">Flex item 31</div>
				<div class="p-2 border">Flex item 32</div>
				<div class="p-2 border">Flex item 33</div>
				<div class="p-2 border">Flex item 34</div>
				<div class="p-2 border">Flex item 35</div>
			</div>
			<br>
		</div>
	</body>
</html>

对齐内容

使用.align-content-*类可以控制弹性项目的垂直对齐方式。

这些类用于设置弹性容器中多行弹性项目的垂直对齐方式。以下是可用的类及其效果：

.align-content-start（默认）：将弹性项目垂直对齐到容器的顶部。
.align-content-end：将弹性项目垂直对齐到容器的底部。
.align-content-center：将弹性项目垂直居中对齐。
.align-content-between：将第一个弹性项目对齐到容器的顶部，将最后一个弹性项目对齐到容器的底部，并将剩余的弹性项目平均分布在中间。
.align-content-around：将弹性项目平均分布在容器内，两侧留有相等的空白。
.align-content-stretch：将弹性项目拉伸以填充整个容器的高度。

请注意，这些类只对具有多行弹性项目的容器生效，对于单行弹性项目没有影响。您可以根据需要选择合适的类来对齐弹性项目的垂直位置。

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<p>.align-content-start (默认):</p>
			<div class="d-flex flex-wrap align-content-start bg-light" style="height:300px">
				<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 class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</div>
			</div>
			<br>
			<p>.align-content-end:</p>
			<div class="d-flex flex-wrap align-content-end bg-light" style="height:300px">
				<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 class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</div>
			</div>
			<br>
			<p>.align-content-center:</p>
			<div class="d-flex flex-wrap align-content-center bg-light" style="height:300px">
				<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 class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</div>
			</div>
			<br>
			<p>.align-content-around:</p>
			<div class="d-flex flex-wrap align-content-around bg-light" style="height:300px">
				<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 class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</div>
			</div>
			<br>
			<p>.align-content-stretch:</p>
			<div class="d-flex flex-wrap align-content-stretch bg-light" style="height:300px">
				<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 class="p-2 border">Flex item 14</div>
				<div class="p-2 border">Flex item 15</div>
				<div class="p-2 border">Flex item 16</div>
				<div class="p-2 border">Flex item 17</div>
				<div class="p-2 border">Flex item 18</div>
				<div class="p-2 border">Flex item 19</div>
				<div class="p-2 border">Flex item 20</div>
				<div class="p-2 border">Flex item 21</div>
				<div class="p-2 border">Flex item 22</div>
				<div class="p-2 border">Flex item 23</div>
				<div class="p-2 border">Flex item 24</div>
				<div class="p-2 border">Flex item 25</div>
			</div>
			<br>
		</div>
	</body>
</html>

子元素对齐

可以使用.align-items-*类来控制单行子元素的对齐方式。

这些类用于设置弹性容器中单行子元素的垂直对齐方式。以下是可用的类及其效果：

.align-items-start：将子元素垂直对齐到容器的顶部。
.align-items-end：将子元素垂直对齐到容器的底部。
.align-items-center：将子元素垂直居中对齐。
.align-items-baseline：将子元素基线对齐。
.align-items-stretch（默认）：将子元素拉伸以填充整个容器的高度。

请注意，这些类只对具有单行子元素的容器生效，对于多行弹性项目没有影响。您可以根据需要选择合适的类来对齐单行子元素的垂直位置。

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<p>.align-items-start:</p>
			<div class="d-flex align-items-start bg-light" style="height:150px">
				<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>.align-items-end:</p>
			<div class="d-flex align-items-end bg-light" style="height:150px">
				<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>.align-items-center:</p>
			<div class="d-flex align-items-center bg-light" style="height:150px">
				<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>.align-items-baseline:</p>
			<div class="d-flex align-items-baseline bg-light" style="height:150px">
				<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>.align-items-stretch (默认):</p>
			<div class="d-flex align-items-stretch bg-light" style="height:150px">
				<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>
		</div>
	</body>
</html>

指定子元素对齐

可以使用.align-self-*类来控制单个子元素的垂直对齐方式。

这些类用于设置弹性容器中单个子元素的垂直对齐方式。以下是可用的类及其效果：

.align-self-start：将子元素垂直对齐到容器的顶部。
.align-self-end：将子元素垂直对齐到容器的底部。
.align-self-center：将子元素垂直居中对齐。
.align-self-baseline：将子元素基线对齐。
.align-self-stretch（默认）：将子元素拉伸以填充整个容器的高度。

请注意，这些类只对单个子元素生效，而不是整个容器或多个子元素。您可以通过为特定的子元素添加适当的类来控制其垂直对齐方式。

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<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>
		</div>
	</body>
</html>

响应式 Flex 类

所有弹性类都带有额外的响应类，这使得在特定屏幕尺寸上设置特定 flex 类变得容易。* 符号可以替换为 sm、md、lg、xl 或 xxl，分别代表小、中、大、超大和特大屏幕。

类	实例	实现
弹性容器
`.d-*-flex`	根据不同的屏幕设备创建弹性盒子容器	尝试一下
`.d-*-inline-flex`	根据不同的屏幕设备创建行内弹性盒子容器	尝试一下
方向
`.flex-*-row`	根据不同的屏幕设备在水平方向显示弹性子元素	尝试一下
`.flex-*-row-reverse`	根据不同的屏幕设备在水平方向显示弹性子元素，且右对齐	尝试一下
`.flex-*-column`	根据不同的屏幕设备在垂直方向显示弹性子元素	尝试一下
`.flex-*-column-reverse`	根据不同的屏幕设备在垂直方向显示弹性子元素，且方向相反	尝试一下
内容对齐
`.justify-content-*-start`	根据不同屏幕设备在开始位置显示弹性子元素 (左对齐)	尝试一下
`.justify-content-*-end`	根据不同屏幕设备在尾部显示弹性子元素 (右对齐)	尝试一下
`.justify-content-*-center`	根据不同屏幕设备在 flex 容器中居中显示子元素	尝试一下
`.justify-content-*-between`	根据不同屏幕设备使用 "between" 显示弹性子元素	尝试一下
`.justify-content-*-around`	根据不同屏幕设备使用 "around" 显示弹性子元素	尝试一下
等宽
`.flex-*-fill`	根据不同的屏幕设备强制等宽	尝试一下
扩展
`.flex-*-grow-0`	不同的屏幕设备不设置扩展
`.flex-*-grow-1`	不同的屏幕设备设置扩展
收缩
`.flex-*-shrink-0`	不同的屏幕设备不设置收缩
`.flex-*-shrink-1`	不同的屏幕设备设置收缩
包裹
`.flex-*-nowrap`	不同的屏幕设备不设置包裹元素	尝试一下
`.flex-*-wrap`	不同的屏幕设备设置包裹元素	尝试一下
`.flex-*-wrap-reverse`	不同的屏幕设备反转包裹元素	尝试一下
内容排列
`.align-content-*-start`	根据不同屏幕设备在起始位置堆叠元素	尝试一下
`.align-content-*-end`	根据不同屏幕设备在结束位置堆叠元素	尝试一下
`.align-content-*-center`	根据不同屏幕设备在中间位置堆叠元素	尝试一下
`.align-content-*-around`	根据不同屏幕设备，使用 "around" 堆叠元素	尝试一下
`.align-content-*-stretch`	根据不同屏幕设备，通过伸展元素来堆叠	尝试一下
排序
`.order-*-0-12`	在小屏幕尺寸上修改排序	尝试一下
元素对齐
`.align-items-*-start`	根据不同屏幕设备，让元素在头部显示在同一行。	尝试一下
`.align-items-*-end`	根据不同屏幕设备，让元素在尾部显示在同一行。	尝试一下
`.align-items-*-center`	根据不同屏幕设备，让元素在中间位置显示在同一行。	尝试一下
`.align-items-*-baseline`	根据不同屏幕设备，让元素在基线上显示在同一行。	尝试一下
`.align-items-*-stretch`	根据不同屏幕设备，让元素延展高度并显示在同一行。	尝试一下
单独一个子元素的对齐方式
`.align-self-*-start`	据不同屏幕设备，让单独一个子元素显示在头部。	尝试一下
`.align-self-*-end`	据不同屏幕设备，让单独一个子元素显示在尾部	尝试一下
`.align-self-*-center`	据不同屏幕设备，让单独一个子元素显示在居中位置	尝试一下
`.align-self-*-baseline`	据不同屏幕设备，让单独一个子元素显示在基线位置	尝试一下
`.align-self-*-stretch`	据不同屏幕设备，延展一个单独子元素	尝试一下

正在奋斗的程序猿

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习Bootstrap 5的第十六天

Flex（弹性）布局Flex（弹性）布局弹性盒子(flexbox)Bootstrap 3 和 Bootstrap 4 & 5 的最大区别在于 Bootstrap 5 现在使用 flexbox 而不是浮动来处理布局。弹性的框布局模块，可以更轻松地设计弹性响应式布局结构，而无需使用浮动或定位。注意：IE9 及更早版本不支持 Flexbox。如果需要 IE8-9 支持，请使用 Bootstrap 3。它是最稳定的 Bootstrap 版本，团队仍然支持它进行关键错误修复和文档更改。
复制链接

扫一扫