Bootstrap 5 Flex
Bootstrap 2023-08-10 09:26:55小码哥的IT人生shichen
Bootstrap 5 Flex
弹性框
Bootstrap 3 和 Bootstrap 4 & 5 的最大区别在于 Bootstrap 5 现在使用 flexbox 而不是浮动来处理布局。
弹性的框布局模块，可以更轻松地设计弹性响应式布局结构，而无需使用浮动或定位。
如果您不熟悉 flex，可以在我们的 CSS Flexbox 教程 中学习。
注释：IE9 及更早版本不支持 Flexbox。
注释：如果您需要 IE8-9 支持，请使用 Bootstrap 3。它是最稳定的 Bootstrap 版本，团队仍然支持它进行关键错误修复和文档更改。但是不会向其中添加任何新功能。
示例代码：
如需创建 flexbox 容器并将直接子项转换为 flex 项，请使用 d-flex 类：
<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>
完整实例【亲自试一试】：
<!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">
<h2>弹性框</h2>
<p>如需创建 flexbox 容器并将直接子项转换为 flex 项，请使用 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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
如需创建行内 flexbox 容器，请使用 d-inline-flex 类：
<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>
完整实例【亲自试一试】：
<!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">
<h2>行内弹性框</h2>
<p>如需创建行内 flexbox 容器，请使用 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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
水平方向
请使用 .flex-row 水平（并排）显示弹性项目。这是默认设置。
提示：使用 .flex-row-reverse 可水平方向右对齐：
示例代码：
<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>
<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>
完整实例【亲自试一试】：
<!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">
<h2>水平方向</h2>
<p>请使用 .flex-row 水平（并排）显示弹性项目。这是默认设置。</p>
<div class="d-flex flex-row 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>
<p>使用 .flex-row-reverse 可水平方向右对齐：</p>
<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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
垂直方向
请使用 .flex-column 垂直显示 flex 项目（彼此堆叠），或使用 .flex-column-reverse 反转垂直方向：
示例代码：
<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>
<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>
完整实例【亲自试一试】：
<!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">
<h2>垂直方向</h2>
<p>请使用 .flex-column 垂直显示 flex 项目（彼此堆叠）：</p>
<div class="d-flex flex-column 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>
<p>使用 .flex-column-reverse 反转垂直方向：</p>
<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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
对齐内容
使用 .justify-content-* 类可改变弹性项目的对齐方式。有效的类是：：
start（默认）endcenterbetweenaround
示例代码：
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
完整实例【亲自试一试】：
<!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">
<h2>对齐内容</h2>
<p>使用 .justify-content-* 类可改变弹性项目的对齐方式：</p>
<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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
等宽
在 flex 项目上使用 .flex-fill 可强制它们等宽：
示例代码：
<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>
完整实例【亲自试一试】：
<!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">
<h2>等宽</h2>
<p>在 flex 项目上使用 .flex-fill 可强制它们等宽：</p>
<div class="d-flex mb-3">
<div class="p-2 flex-fill bg-info">弹性项目 1</div>
<div class="p-2 flex-fill bg-warning">弹性项目 2</div>
<div class="p-2 flex-fill bg-primary">弹性项目 3</div>
</div>
<p>Example without .flex-fill:</p>
<div class="d-flex mb-3 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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
伸展
在 flex 项目上使用 .flex-grow-1 可占用多余的空间。在下面的例子中，前两个 flex 项目占用了必要的空间，而最后一个项目占用了剩余的可用空间：
示例代码：
<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>
完整实例【亲自试一试】：
<!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">
<h2>伸展</h2>
<p>在 flex 项目上使用 .flex-grow-1 可占用多余的空间：</p>
<div class="d-flex mb-3">
<div class="p-2 bg-info">弹性项目 1</div>
<div class="p-2 bg-warning">弹性项目 2</div>
<div class="p-2 flex-grow-1 bg-primary">弹性项目 3</div>
</div>
<p>Example without .flex-grow-1:</p>
<div class="d-flex mb-3 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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
提示：在 flex 项目上使用 .flex-shrink-1 可使其在必要时收缩。
顺序
使用 .order 类可更改特定 flex 项的视觉顺序。有效的类从 0 到 5，其中最低的数字具有最高的优先级（order-1 显示在 order-2 之前，以此类推）：
示例代码：
<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>
完整实例【亲自试一试】：
<!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">
<h2>顺序</h2>
<p>使用 .order 类可更改特定 flex 项的视觉顺序。有效的类从 0 到 5，其中最低的数字具有最高的优先级（order-1 显示在 order-2 之前，以此类推）：</p>
<div class="d-flex mb-3">
<div class="p-2 order-3 bg-info">弹性项目 1</div>
<div class="p-2 order-2 bg-warning">弹性项目 2</div>
<div class="p-2 order-1 bg-primary">弹性项目 3</div>
</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
自动外边距
使用 .ms-auto（将项目向右推）或使用 .me-auto（将项目向左推）可轻松地为弹性项目添加自动边距：
示例代码：
<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>
<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>
完整实例【亲自试一试】：
<!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">
<h2>自动外边距</h2>
<p>使用 .ms-auto（将项目向右推）或使用 .me-auto（将项目向左推）可轻松地为弹性项目添加自动边距：</p>
<div class="d-flex mb-3 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>
<div class="d-flex mb-3 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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
换行
通过 .flex-nowrap（默认）、.flex-wrap 或 .flex-wrap-reverse，可控制 flex 项目如何包装在 flex 容器中。
示例代码：
<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>
完整实例【亲自试一试】：
<!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">
<h2>换行</h2>
<p>通过 .flex-nowrap（默认）、.flex-wrap 或 .flex-wrap-reverse，可控制 flex 项目如何包装在 flex 容器中。</p>
<p><code>.flex-wrap:</code></p>
<div class="d-flex flex-wrap bg-light">
<div class="p-2 border">弹性项目 1</div>
<div class="p-2 border">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
<div class="p-2 border">弹性项目 4</div>
<div class="p-2 border">弹性项目 5</div>
<div class="p-2 border">弹性项目 6</div>
<div class="p-2 border">弹性项目 7</div>
<div class="p-2 border">弹性项目 8</div>
<div class="p-2 border">弹性项目 9</div>
<div class="p-2 border">弹性项目 10</div>
<div class="p-2 border">弹性项目 11</div>
<div class="p-2 border">弹性项目 12</div>
<div class="p-2 border">弹性项目 13 </div>
<div class="p-2 border">弹性项目 14</div>
<div class="p-2 border">弹性项目 15</div>
<div class="p-2 border">弹性项目 16</div>
<div class="p-2 border">弹性项目 17</div>
<div class="p-2 border">弹性项目 18</div>
<div class="p-2 border">弹性项目 19</div>
<div class="p-2 border">弹性项目 20</div>
<div class="p-2 border">弹性项目 21</div>
<div class="p-2 border">弹性项目 22</div>
<div class="p-2 border">弹性项目 23</div>
<div class="p-2 border">弹性项目 24</div>
<div class="p-2 border">弹性项目 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">弹性项目 1</div>
<div class="p-2 border">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
<div class="p-2 border">弹性项目 4</div>
<div class="p-2 border">弹性项目 5</div>
<div class="p-2 border">弹性项目 6</div>
<div class="p-2 border">弹性项目 7</div>
<div class="p-2 border">弹性项目 8</div>
<div class="p-2 border">弹性项目 9</div>
<div class="p-2 border">弹性项目 10</div>
<div class="p-2 border">弹性项目 11</div>
<div class="p-2 border">弹性项目 12</div>
<div class="p-2 border">弹性项目 13 </div>
<div class="p-2 border">弹性项目 14</div>
<div class="p-2 border">弹性项目 15</div>
<div class="p-2 border">弹性项目 16</div>
<div class="p-2 border">弹性项目 17</div>
<div class="p-2 border">弹性项目 18</div>
<div class="p-2 border">弹性项目 19</div>
<div class="p-2 border">弹性项目 20</div>
<div class="p-2 border">弹性项目 21</div>
<div class="p-2 border">弹性项目 22</div>
<div class="p-2 border">弹性项目 23</div>
<div class="p-2 border">弹性项目 24</div>
<div class="p-2 border">弹性项目 25</div>
</div>
<br>
<p><code>.flex-nowrap:</code></p>
<div class="d-flex flex-nowrap bg-light">
<div class="p-2 border">弹性项目 1</div>
<div class="p-2 border">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
<div class="p-2 border">弹性项目 4</div>
<div class="p-2 border">弹性项目 5</div>
<div class="p-2 border">弹性项目 6</div>
<div class="p-2 border">弹性项目 7</div>
<div class="p-2 border">弹性项目 8</div>
<div class="p-2 border">弹性项目 9</div>
<div class="p-2 border">弹性项目 10</div>
<div class="p-2 border">弹性项目 11</div>
<div class="p-2 border">弹性项目 12</div>
<div class="p-2 border">弹性项目 13 </div>
<div class="p-2 border">弹性项目 14</div>
<div class="p-2 border">弹性项目 15</div>
<div class="p-2 border">弹性项目 16</div>
<div class="p-2 border">弹性项目 17</div>
<div class="p-2 border">弹性项目 18</div>
<div class="p-2 border">弹性项目 19</div>
<div class="p-2 border">弹性项目 20</div>
<div class="p-2 border">弹性项目 21</div>
<div class="p-2 border">弹性项目 22</div>
<div class="p-2 border">弹性项目 23</div>
<div class="p-2 border">弹性项目 24</div>
<div class="p-2 border">弹性项目 25</div>
<div class="p-2 border">弹性项目 26</div>
<div class="p-2 border">弹性项目 27</div>
<div class="p-2 border">弹性项目 28</div>
<div class="p-2 border">弹性项目 29</div>
<div class="p-2 border">弹性项目 30</div>
<div class="p-2 border">弹性项目 31</div>
<div class="p-2 border">弹性项目 32</div>
<div class="p-2 border">弹性项目 33</div>
<div class="p-2 border">弹性项目 34</div>
<div class="p-2 border">弹性项目 35</div>
</div>
<br>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
对齐内容
请使用 .align-content-* 类控制弹性项目的垂直对齐方式。有效的类是：
.align-content-start（默认）.align-content-end.align-content-center.align-content-between.align-content-around.align-content-stretch
注释：这些类对单行弹性项没有影响。
请单击下面的按钮，通过更改实例框中弹性项的垂直对齐方式来查看五个类的区别：
示例代码：
<div class="d-flex flex-wrap align-content-start">..</div>
<div class="d-flex flex-wrap align-content-end">..</div>
<div class="d-flex flex-wrap align-content-center">..</div>
<div class="d-flex flex-wrap align-content-around">..</div>
<div class="d-flex flex-wrap align-content-stretch">..</div>
完整实例【亲自试一试】：
<!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">
<h2>对齐内容</h2>
<p>请使用 .align-content-* 类控制弹性项目的垂直对齐方式。</p>
<p><b>注释：</b>这个例子在小型设备上看起来不太好。另请注意，这些类对单行 flex 项没有影响。</p>
<p>.align-content-start（默认）：</p>
<div class="d-flex flex-wrap align-content-start bg-light" style="height:300px">
<div class="p-2 border">弹性项目 1</div>
<div class="p-2 border">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
<div class="p-2 border">弹性项目 4</div>
<div class="p-2 border">弹性项目 5</div>
<div class="p-2 border">弹性项目 6</div>
<div class="p-2 border">弹性项目 7</div>
<div class="p-2 border">弹性项目 8</div>
<div class="p-2 border">弹性项目 9</div>
<div class="p-2 border">弹性项目 10</div>
<div class="p-2 border">弹性项目 11</div>
<div class="p-2 border">弹性项目 12</div>
<div class="p-2 border">弹性项目 13 </div>
<div class="p-2 border">弹性项目 14</div>
<div class="p-2 border">弹性项目 15</div>
<div class="p-2 border">弹性项目 16</div>
<div class="p-2 border">弹性项目 17</div>
<div class="p-2 border">弹性项目 18</div>
<div class="p-2 border">弹性项目 19</div>
<div class="p-2 border">弹性项目 20</div>
<div class="p-2 border">弹性项目 21</div>
<div class="p-2 border">弹性项目 22</div>
<div class="p-2 border">弹性项目 23</div>
<div class="p-2 border">弹性项目 24</div>
<div class="p-2 border">弹性项目 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">弹性项目 1</div>
<div class="p-2 border">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
<div class="p-2 border">弹性项目 4</div>
<div class="p-2 border">弹性项目 5</div>
<div class="p-2 border">弹性项目 6</div>
<div class="p-2 border">弹性项目 7</div>
<div class="p-2 border">弹性项目 8</div>
<div class="p-2 border">弹性项目 9</div>
<div class="p-2 border">弹性项目 10</div>
<div class="p-2 border">弹性项目 11</div>
<div class="p-2 border">弹性项目 12</div>
<div class="p-2 border">弹性项目 13 </div>
<div class="p-2 border">弹性项目 14</div>
<div class="p-2 border">弹性项目 15</div>
<div class="p-2 border">弹性项目 16</div>
<div class="p-2 border">弹性项目 17</div>
<div class="p-2 border">弹性项目 18</div>
<div class="p-2 border">弹性项目 19</div>
<div class="p-2 border">弹性项目 20</div>
<div class="p-2 border">弹性项目 21</div>
<div class="p-2 border">弹性项目 22</div>
<div class="p-2 border">弹性项目 23</div>
<div class="p-2 border">弹性项目 24</div>
<div class="p-2 border">弹性项目 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">弹性项目 1</div>
<div class="p-2 border">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
<div class="p-2 border">弹性项目 4</div>
<div class="p-2 border">弹性项目 5</div>
<div class="p-2 border">弹性项目 6</div>
<div class="p-2 border">弹性项目 7</div>
<div class="p-2 border">弹性项目 8</div>
<div class="p-2 border">弹性项目 9</div>
<div class="p-2 border">弹性项目 10</div>
<div class="p-2 border">弹性项目 11</div>
<div class="p-2 border">弹性项目 12</div>
<div class="p-2 border">弹性项目 13 </div>
<div class="p-2 border">弹性项目 14</div>
<div class="p-2 border">弹性项目 15</div>
<div class="p-2 border">弹性项目 16</div>
<div class="p-2 border">弹性项目 17</div>
<div class="p-2 border">弹性项目 18</div>
<div class="p-2 border">弹性项目 19</div>
<div class="p-2 border">弹性项目 20</div>
<div class="p-2 border">弹性项目 21</div>
<div class="p-2 border">弹性项目 22</div>
<div class="p-2 border">弹性项目 23</div>
<div class="p-2 border">弹性项目 24</div>
<div class="p-2 border">弹性项目 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">弹性项目 1</div>
<div class="p-2 border">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
<div class="p-2 border">弹性项目 4</div>
<div class="p-2 border">弹性项目 5</div>
<div class="p-2 border">弹性项目 6</div>
<div class="p-2 border">弹性项目 7</div>
<div class="p-2 border">弹性项目 8</div>
<div class="p-2 border">弹性项目 9</div>
<div class="p-2 border">弹性项目 10</div>
<div class="p-2 border">弹性项目 11</div>
<div class="p-2 border">弹性项目 12</div>
<div class="p-2 border">弹性项目 13 </div>
<div class="p-2 border">弹性项目 14</div>
<div class="p-2 border">弹性项目 15</div>
<div class="p-2 border">弹性项目 16</div>
<div class="p-2 border">弹性项目 17</div>
<div class="p-2 border">弹性项目 18</div>
<div class="p-2 border">弹性项目 19</div>
<div class="p-2 border">弹性项目 20</div>
<div class="p-2 border">弹性项目 21</div>
<div class="p-2 border">弹性项目 22</div>
<div class="p-2 border">弹性项目 23</div>
<div class="p-2 border">弹性项目 24</div>
<div class="p-2 border">弹性项目 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">弹性项目 1</div>
<div class="p-2 border">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
<div class="p-2 border">弹性项目 4</div>
<div class="p-2 border">弹性项目 5</div>
<div class="p-2 border">弹性项目 6</div>
<div class="p-2 border">弹性项目 7</div>
<div class="p-2 border">弹性项目 8</div>
<div class="p-2 border">弹性项目 9</div>
<div class="p-2 border">弹性项目 10</div>
<div class="p-2 border">弹性项目 11</div>
<div class="p-2 border">弹性项目 12</div>
<div class="p-2 border">弹性项目 13 </div>
<div class="p-2 border">弹性项目 14</div>
<div class="p-2 border">弹性项目 15</div>
<div class="p-2 border">弹性项目 16</div>
<div class="p-2 border">弹性项目 17</div>
<div class="p-2 border">弹性项目 18</div>
<div class="p-2 border">弹性项目 19</div>
<div class="p-2 border">弹性项目 20</div>
<div class="p-2 border">弹性项目 21</div>
<div class="p-2 border">弹性项目 22</div>
<div class="p-2 border">弹性项目 23</div>
<div class="p-2 border">弹性项目 24</div>
<div class="p-2 border">弹性项目 25</div>
</div>
<br>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
对齐项目
请使用 .align-items-* 类控制单行弹性项目的垂直对齐方式。有效的类是：
.align-items-start.align-items-end.align-items-center.align-items-baseline.align-items-stretch（默认）
请单击下面的按钮查看五个类之间的区别：
示例代码：
<div class="d-flex align-items-start">..</div>
<div class="d-flex align-items-end">..</div>
<div class="d-flex align-items-center">..</div>
<div class="d-flex align-items-baseline">..</div>
<div class="d-flex align-items-stretch">..</div>
完整实例【亲自试一试】：
<!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">
<h2>对齐项目</h2>
<p>请使用 .align-items-* 类控制单行弹性项目的垂直对齐方式。</p>
<p>.align-items-start:</p>
<div class="d-flex align-items-start bg-light" style="height:150px">
<div class="p-2 border">弹性项目 1</div>
<div class="p-2 border">弹性项目 2</div>
<div class="p-2 border">弹性项目 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">弹性项目 1</div>
<div class="p-2 border">弹性项目 2</div>
<div class="p-2 border">弹性项目 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">弹性项目 1</div>
<div class="p-2 border">弹性项目 2</div>
<div class="p-2 border">弹性项目 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">弹性项目 1</div>
<div class="p-2 border">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
</div>
<br>
<p>.align-items-stretch (default):</p>
<div class="d-flex align-items-stretch bg-light" style="height:150px">
<div class="p-2 border">弹性项目 1</div>
<div class="p-2 border">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
</div>
<br>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
自我对齐
请使用 .align-self-* 类控制指定弹性项目的垂直对齐方式。有效的类是：
.align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-stretch（默认）
单击下面的按钮查看五个类之间的区别：
示例代码：
<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>
完整实例【亲自试一试】：
<!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">
<h2>自我对齐</h2>
<p>请使用 .align-self-* 类控制指定弹性项目的垂直对齐方式。</p>
<p>.align-self-start:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">弹性项目 1</div>
<div class="p-2 border align-self-start">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
</div>
<br>
<p>.align-self-end:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">弹性项目 1</div>
<div class="p-2 border align-self-end">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
</div>
<br>
<p>.align-self-center:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">弹性项目 1</div>
<div class="p-2 border align-self-center">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
</div>
<br>
<p>.align-self-baseline:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">弹性项目 1</div>
<div class="p-2 border align-self-baseline">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
</div>
<br>
<p>.align-self-stretch (default):</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">弹性项目 1</div>
<div class="p-2 border align-self-stretch">弹性项目 2</div>
<div class="p-2 border">弹性项目 3</div>
</div>
<br>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
响应式 Flex 类
所有弹性类都带有额外的响应类，这使得在特定屏幕尺寸上设置特定 flex 类变得容易。
* 符号可以替换为 sm、md、lg、xl 或 xxl，分别代表小、中、大、超大和特大屏幕。
搜索特定的弹性类 ..
| 类 | 描述 | 例子 |
|---|---|---|
| 弹性容器 | ||
.d-*-flex |
为不同的屏幕创建 flexbox 容器。 | 试一试 |
.d-*-inline-flex |
为不同的屏幕创建行内的 flexbox 容器。 | 试一试 |
| 方向 | ||
.flex-*-row |
在不同屏幕上水平显示弹性项目。 | 试一试 |
.flex-*-row-reverse |
在不同的屏幕上水平和右对齐显示弹性项目。 | 试一试 |
.flex-*-column |
在不同屏幕上垂直显示弹性项目。 | 试一试 |
.flex-*-column-reverse |
在不同的屏幕屏幕上以相反的顺序垂直显示弹性项目。 | 试一试 |
| 齐行的内容 | ||
.justify-content-*-start |
在不同屏幕上从开头（左对齐）显示弹性项目。 | 试一试 |
.justify-content-*-end |
在不同屏幕的末尾（右对齐）显示弹性项目。 | 试一试 |
.justify-content-*-center |
在不同屏幕的弹性容器中心显示弹性项目。 | 试一试 |
.justify-content-*-between |
在不同屏幕上的均等显示弹性项目。 | 试一试 |
.justify-content-*-around |
在不同屏幕上“围绕”显示弹性项目。 | 试一试 |
| Fill / 等宽 | ||
.flex-*-fill |
强制弹性项目在不同屏幕上的宽度相等。 | 试一试 |
| 扩展 | ||
.flex-*-grow-0 |
不要让项目在不同的屏幕上扩展。 | |
.flex-*-grow-1 |
使项目在不同的屏幕上扩展。 | |
| 收缩 | ||
.flex-*-shrink-0 |
不要让项目在不同屏幕上收缩。 | |
.flex-*-shrink-1 |
使项目在不同屏幕上收缩。 | |
| 顺序 | ||
.order-*-0-12 |
在小屏幕从 0 到 12 更改顺序。 | 试一试 |
| 换行 | ||
.flex-*-nowrap |
不要在不同的屏幕上对项目换行。 | 试一试 |
.flex-*-wrap |
在不同的屏幕上对项目换行。 | 试一试 |
.flex-*-wrap-reverse |
反转不同屏幕上对项目的换行。 | 试一试 |
| 对齐内容 | ||
.align-content-*-start |
在不同屏幕上从开头对齐项目。 | 试一试 |
.align-content-*-end |
在不同屏幕的末尾对齐项目。 | 试一试 |
.align-content-*-center |
在不同屏幕的中心对齐项目。 | 试一试 |
.align-content-*-around |
在不同屏幕的周围对齐项目。 | 试一试 |
.align-content-*-stretch |
在不同的屏幕上拉伸项目。 | 试一试 |
| 对齐项目 | ||
.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 |
在不同屏幕上拉伸弹性项目。 | 试一试 |
完整实例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">
<h2>弹性框</h2>
<p>如需创建 flexbox 容器，请添加 d-flex 类。请使用任何 d-*-flex 类来控制元素何时应该是特定屏幕宽度上的 flex 元素。</p>
<p>请调整浏览器窗口大小来查看效果。</p>
<div class="d-flex bg-success">d-flex</div>
<span class="d-sm-flex bg-success">d-sm-flex</span>
<span class="d-md-flex bg-success">d-md-flex</span>
<span class="d-lg-flex bg-success">d-lg-flex</span>
<span class="d-xl-flex bg-success">d-xl-flex</span>
<span class="d-xxl-flex bg-success">d-xxl-flex</span>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例2：
<!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">
<h2>行内弹性框</h2>
<p>如需创建行内 flexbox 容器，请添加 d-inline-flex 类。请使用任意 d-*-inline-flex 类来控制元素何时应该是特定屏幕宽度上的 flex 元素。</p>
<p>请调整浏览器窗口大小来查看效果。</p>
<div class="d-inline-flex bg-success">d-flex</div>
<div class="d-sm-inline-flex bg-success">d-sm-flex</div>
<div class="d-md-inline-flex bg-success">d-md-flex</div>
<div class="d-lg-inline-flex bg-success">d-lg-flex</div>
<div class="d-xl-inline-flex bg-success">d-xl-flex</div>
<div class="d-xxl-inline-flex bg-success">d-xxl-flex</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例3：
<!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">
<h2>水平方向</h2>
<p>请使用 .flex-row 使弹性项目并排显示（默认）。</p>
<p>请使用 .flex-sm|md|lg|xl-row 在特定屏幕尺寸上实现此效果。调整浏览器窗口大小来查看效果。</p>
<p><code>flex-row:</code></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><code>flex-sm-row:</code></p>
<div class="d-sm-flex flex-sm-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><code>flex-md-row:</code></p>
<div class="d-md-flex flex-md-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><code>flex-lg-row:</code></p>
<div class="d-lg-flex flex-lg-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><code>flex-xl-row:</code></p>
<div class="d-xl-flex flex-xl-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><code>flex-xxl-row:</code></p>
<div class="d-xxl-flex flex-xxl-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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例4：
<!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">
<h2>水平方向</h2>
<p>使用 .flex-row 使弹性项目并排显示（默认）。</p>
<p>使用 .flex-row-reverse 右对齐方向，并使用 .flex-sm|md|lg|xl-row-reverse 在特定屏幕尺寸上右对齐方向。请调整浏览器窗口大小来查看效果。</p>
<p><code>flex-row-reverse:</code></p>
<div class="d-flex flex-row-reverse 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><code>flex-sm-row-reverse:</code></p>
<div class="d-flex flex-sm-row-reverse 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><code>flex-md-row-reverse:</code></p>
<div class="d-flex flex-md-row-reverse 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><code>flex-lg-row-reverse:</code></p>
<div class="d-flex flex-lg-row-reverse 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><code>flex-xl-row-reverse:</code></p>
<div class="d-flex flex-xl-row-reverse 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><code>flex-xxl-row-reverse:</code></p>
<div class="d-flex flex-xxl-row-reverse 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>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例5：
<!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">
<h2>垂直方向</h2>
<p>使用 .flex-column 垂直显示 flex 项目（堆叠）。</p>
<p>使用 .flex-sm|md|lg|xl-column 在不同屏幕尺寸上实现此效果。</p>
<p><code>.flex-column</code>:</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><code>.flex-sm-column</code>:</p>
<div class="d-flex flex-sm-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><code>.flex-md-column</code>:</p>
<div class="d-flex flex-md-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><code>.flex-lg-column</code>:</p>
<div class="d-flex flex-lg-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><code>.flex-xl-column</code>:</p>
<div class="d-flex flex-xl-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><code>.flex-xxl-column</code>:</p>
<div class="d-flex flex-xxl-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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例6：
<!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">
<h2>垂直方向</h2>
<p>使用 .flex-column 垂直显示 flex 项目（堆叠）。</p>
<p>使用 .flex-column-reverse 来反转垂直方向，并使用 .flex-sm|md|lg|xl-column-reverse 在不同的屏幕尺寸上实现这一点。</p>
<p><code>.flex-column-reverse</code>:</p>
<div class="d-flex flex-column-reverse 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><code>.flex-sm-column-reverse</code>:</p>
<div class="d-flex flex-sm-column-reverse 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><code>.flex-md-column-reverse</code>:</p>
<div class="d-flex flex-md-column-reverse 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><code>.flex-lg-column-reverse</code>:</p>
<div class="d-flex flex-lg-column-reverse 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><code>.flex-xl-column-reverse</code>:</p>
<div class="d-flex flex-xl-column-reverse 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><code>.flex-xxl-column-reverse</code>:</p>
<div class="d-flex flex-xxl-column-reverse 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>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例7：
<!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">
<h2>在开头对齐内容</h2>
<p>使用 .justify-content-*-start 在不同的屏幕尺寸上从开头（左对齐）显示弹性项目。 <b>注意：</b>左对齐且从开头就是默认的。</p>
<p><code>.justify-content-start</code>:</p>
<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>
<p><code>.justify-content-sm-start</code>:</p>
<div class="d-flex justify-content-sm-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>
<p><code>.justify-content-md-start</code>:</p>
<div class="d-flex justify-content-md-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>
<p><code>.justify-content-lg-start</code>:</p>
<div class="d-flex justify-content-lg-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>
<p><code>.justify-content-xl-start</code>:</p>
<div class="d-flex justify-content-xl-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>
<p><code>.justify-content-xxl-start</code>:</p>
<div class="d-flex justify-content-xxl-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>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例8：
<!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">
<h2>在末尾对齐内容</h2>
<p>使用 .justify-content-*-end 在不同屏幕尺寸的末尾（右对齐）显示 flex 项目。</p>
<p>请调整浏览器窗口大小来查看效果。</p>
<p><code>.justify-content-end</code>:</p>
<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>
<p><code>.justify-content-sm-end</code>:</p>
<div class="d-flex justify-content-sm-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>
<p><code>.justify-content-md-end</code>:</p>
<div class="d-flex justify-content-md-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>
<p><code>.justify-content-lg-end</code>:</p>
<div class="d-flex justify-content-lg-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>
<p><code>.justify-content-xl-end</code>:</p>
<div class="d-flex justify-content-xl-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>
<p><code>.justify-content-xxl-end</code>:</p>
<div class="d-flex justify-content-xxl-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>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例9：
<!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">
<h2>居中对齐内容</h2>
<p>使用 .justify-content-*-center 在不同屏幕尺寸的弹性容器中间显示弹性项目。</p>
<p>请调整浏览器窗口大小来查看效果。</p>
<p><code>.justify-content-center</code>:</p>
<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>
<p><code>.justify-content-sm-center</code>:</p>
<div class="d-flex justify-content-sm-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>
<p><code>.justify-content-md-center</code>:</p>
<div class="d-flex justify-content-md-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>
<p><code>.justify-content-lg-center</code>:</p>
<div class="d-flex justify-content-lg-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>
<p><code>.justify-content-xl-center</code>:</p>
<div class="d-flex justify-content-xl-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>
<p><code>.justify-content-xxl-center</code>:</p>
<div class="d-flex justify-content-xxl-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>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例10：
<!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">
<h2>分隔对齐内容</h2>
<p>请使用 .justify-content-*-between 在不同屏幕尺寸的 flex 容器内的分隔显示 flex 项目。</p>
<p>请调整浏览器窗口大小来查看效果。</p>
<p><code>.justify-content-between</code>:</p>
<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>
<p><code>.justify-content-sm-between</code>:</p>
<div class="d-flex justify-content-sm-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>
<p><code>.justify-content-md-between</code>:</p>
<div class="d-flex justify-content-md-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>
<p><code>.justify-content-lg-between</code>:</p>
<div class="d-flex justify-content-lg-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>
<p><code>.justify-content-xl-between</code>:</p>
<div class="d-flex justify-content-xl-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>
<p><code>.justify-content-xxl-between</code>:</p>
<div class="d-flex justify-content-xxl-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>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例11：
<!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">
<h2>均等对齐内容</h2>
<p>使用 .justify-content-*-around 在不同屏幕尺寸的 flex 容器内均匀地显示 flex 项目。</p>
<p>请调整浏览器窗口大小来查看效果。</p>
<p><code>.justify-content-around</code>:</p>
<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>
<p><code>.justify-content-sm-around</code>:</p>
<div class="d-flex justify-content-sm-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>
<p><code>.justify-content-md-around</code>:</p>
<div class="d-flex justify-content-md-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>
<p><code>.justify-content-lg-around</code>:</p>
<div class="d-flex justify-content-lg-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>
<p><code>.justify-content-xl-around</code>:</p>
<div class="d-flex justify-content-xl-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>
<p><code>.justify-content-xxl-around</code>:</p>
<div class="d-flex justify-content-xxl-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>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例12：
<!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">
<h2>等宽</h2>
<p>在 flex 项目上使用 .flex-fill 强制它们等宽，并使用 .flex-*-fill 在不同的屏幕尺寸上实现这一点。</p>
<p>请调整浏览器窗口大小来查看效果。</p>
<p><code>.flex-fill</code>:</p>
<div class="d-flex mb-3 bg-secondary">
<div class="p-2 flex-fill bg-info">Flex item 1</div>
<div class="p-2 flex-fill bg-warning">Flex item 2</div>
<div class="p-2 flex-fill bg-primary">Flex item 3</div>
</div>
<p><code>.flex-sm-fill</code>:</p>
<div class="d-flex mb-3 bg-secondary">
<div class="p-2 flex-sm-fill bg-info">Flex item 1</div>
<div class="p-2 flex-sm-fill bg-warning">Flex item 2</div>
<div class="p-2 flex-sm-fill bg-primary">Flex item 3</div>
</div>
<p><code>.flex-md-fill</code>:</p>
<div class="d-flex mb-3 bg-secondary">
<div class="p-2 flex-md-fill bg-info">Flex item 1</div>
<div class="p-2 flex-md-fill bg-warning">Flex item 2</div>
<div class="p-2 flex-md-fill bg-primary">Flex item 3</div>
</div>
<p><code>.flex-lg-fill</code>:</p>
<div class="d-flex mb-3 bg-secondary">
<div class="p-2 flex-lg-fill bg-info">Flex item 1</div>
<div class="p-2 flex-lg-fill bg-warning">Flex item 2</div>
<div class="p-2 flex-lg-fill bg-primary">Flex item 3</div>
</div>
<p><code>.flex-xl-fill</code>:</p>
<div class="d-flex mb-3 bg-secondary">
<div class="p-2 flex-xl-fill bg-info">Flex item 1</div>
<div class="p-2 flex-xl-fill bg-warning">Flex item 2</div>
<div class="p-2 flex-xl-fill bg-primary">Flex item 3</div>
</div>
<p><code>.flex-xxl-fill</code>:</p>
<div class="d-flex mb-3 bg-secondary">
<div class="p-2 flex-xxl-fill bg-info">Flex item 1</div>
<div class="p-2 flex-xxl-fill bg-warning">Flex item 2</div>
<div class="p-2 flex-xxl-fill bg-primary">Flex item 3</div>
</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例13：
<!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">
<h2>顺序</h2>
<p>使用 .order 类更改特定 flex 项的视觉顺序。有效的类是从 0 到 12。</p>
<p>在不同的屏幕尺寸上使用 .order-sm|md|lg|xl-0-12 来实现这种效果。还可以组合这些类来形成更加灵活的布局。</p>
<p>请调整浏览器窗口大小来查看效果。</p>
<p><code>.order</code>:</p>
<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>
<p><code>.order-sm</code>:</p>
<div class="d-flex mb-3">
<div class="p-2 order-sm-3 bg-info">Flex item 1</div>
<div class="p-2 order-sm-2 bg-warning">Flex item 2</div>
<div class="p-2 order-sm-1 bg-primary">Flex item 3</div>
</div>
<p><code>.order-md</code>:</p>
<div class="d-flex mb-3">
<div class="p-2 order-md-3 bg-info">Flex item 1</div>
<div class="p-2 order-md-2 bg-warning">Flex item 2</div>
<div class="p-2 order-md-1 bg-primary">Flex item 3</div>
</div>
<p><code>.order-lg</code>:</p>
<div class="d-flex mb-3">
<div class="p-2 order-lg-3 bg-info">Flex item 1</div>
<div class="p-2 order-lg-2 bg-warning">Flex item 2</div>
<div class="p-2 order-lg-1 bg-primary">Flex item 3</div>
</div>
<p><code>.order-xl</code>:</p>
<div class="d-flex mb-3">
<div class="p-2 order-xl-3 bg-info">Flex item 1</div>
<div class="p-2 order-xl-2 bg-warning">Flex item 2</div>
<div class="p-2 order-xl-1 bg-primary">Flex item 3</div>
</div>
<p><code>.order-xxl</code>:</p>
<div class="d-flex mb-3">
<div class="p-2 order-xxl-3 bg-info">Flex item 1</div>
<div class="p-2 order-xxl-2 bg-warning">Flex item 2</div>
<div class="p-2 order-xxl-1 bg-primary">Flex item 3</div>
</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例14：
<!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">
<h2>换行</h2>
<p>使用 .flex-nowrap（默认）、.flex-wrap 或 .flex-wrap-reverse 控制 flex 项目如何在 flex 容器中换行。</p>
<p>如果您不希望 flex 项目换行，请使用 .flex-nowrap 类。</p>
<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>
<br>
<p><code>.flex-sm-nowrap:</code></p>
<div class="d-flex flex-sm-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>
<br>
<p><code>.flex-md-nowrap:</code></p>
<div class="d-flex flex-md-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>
<br>
<p><code>.flex-lg-nowrap:</code></p>
<div class="d-flex flex-lg-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>
<br>
<p><code>.flex-xl-nowrap:</code></p>
<div class="d-flex flex-xl-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>
<br>
<p><code>.flex-xxl-nowrap:</code></p>
<div class="d-flex flex-xxl-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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例15：
<!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">
<h2>换行</h2>
<p>使用 .flex-nowrap（默认）、.flex-wrap 或 .flex-wrap-reverse 控制 flex 项目如何在 flex 容器中换行。</p>
<p>如果您不希望 flex 项目换行，请使用 .flex-nowrap 类。请调整浏览器窗口大小来查看效果。</p>
<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-sm-wrap:</code></p>
<div class="d-flex flex-sm-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-md-wrap:</code></p>
<div class="d-flex flex-md-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-lg-wrap:</code></p>
<div class="d-flex flex-lg-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-xl-wrap:</code></p>
<div class="d-flex flex-xl-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-xxl-wrap:</code></p>
<div class="d-flex flex-xxl-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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例16：
<!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">
<h2>换行</h2>
<p>使用 .flex-nowrap（默认）、.flex-wrap 或 .flex-wrap-reverse 控制 flex 项目如何在 flex 容器中换行。</p>
<p>如果您不希望 flex 项目换行，请使用 .flex-nowrap 类。请调整浏览器窗口大小来查看效果。</p>
<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-sm-wrap-reverse:</code></p>
<div class="d-flex flex-sm-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-md-wrap-reverse:</code></p>
<div class="d-flex flex-md-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-lg-wrap-reverse:</code></p>
<div class="d-flex flex-lg-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-xl-wrap-reverse:</code></p>
<div class="d-flex flex-xl-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-xxl-wrap-reverse:</code></p>
<div class="d-flex flex-xxl-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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例17：
<!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">
<h2>从开头对齐内容（默认）</h2>
<p>使用 .align-content-*-start 类在不同屏幕上从开头对齐项目。</p>
<p><code>.align-content-start</code>:</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><code>.align-content-sm-start</code>:</p>
<div class="d-flex flex-wrap align-content-sm-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><code>.align-content-md-start</code>:</p>
<div class="d-flex flex-wrap align-content-md-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><code>.align-content-lg-start</code>:</p>
<div class="d-flex flex-wrap align-content-lg-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><code>.align-content-xl-start</code>:</p>
<div class="d-flex flex-wrap align-content-xl-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><code>.align-content-xxl-start</code>:</p>
<div class="d-flex flex-wrap align-content-xxl-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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例18：
<!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">
<h2>在末尾对齐内容</h2>
<p>使用 .align-content-*-end 类在不同屏幕上从末尾对齐项目。</p>
<p>请调整浏览器窗口大小来查看效果。</p>
<p><code>.align-content-end</code>:</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><code>.align-content-sm-end</code>:</p>
<div class="d-flex flex-wrap align-content-sm-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><code>.align-content-md-end</code>:</p>
<div class="d-flex flex-wrap align-content-md-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><code>.align-content-lg-end</code>:</p>
<div class="d-flex flex-wrap align-content-lg-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><code>.align-content-xl-end</code>:</p>
<div class="d-flex flex-wrap align-content-xl-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><code>.align-content-xxl-end</code>:</p>
<div class="d-flex flex-wrap align-content-xxl-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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例19：
<!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">
<h2>居中对齐内容</h2>
<p>使用 .align-content-*-center 类在不同屏幕的中央对齐项目。</p>
<p><code>.align-content-center</code>:</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><code>.align-content-sm-center</code>:</p>
<div class="d-flex flex-wrap align-content-sm-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><code>.align-content-md-center</code>:</p>
<div class="d-flex flex-wrap align-content-md-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><code>.align-content-lg-center</code>:</p>
<div class="d-flex flex-wrap align-content-lg-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><code>.align-content-xl-center</code>:</p>
<div class="d-flex flex-wrap align-content-xl-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><code>.align-content-xxl-center</code>:</p>
<div class="d-flex flex-wrap align-content-xxl-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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例20：
<!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">
<h2>均匀对齐内容</h2>
<p>使用 .align-content-*-around 类在不同屏幕上均匀对齐项目。</p>
<p><code>.align-content-around</code>:</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><code>.align-content-sm-around</code>:</p>
<div class="d-flex flex-wrap align-content-sm-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><code>.align-content-md-around</code>:</p>
<div class="d-flex flex-wrap align-content-md-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><code>.align-content-lg-around</code>:</p>
<div class="d-flex flex-wrap align-content-lg-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><code>.align-content-xl-around</code>:</p>
<div class="d-flex flex-wrap align-content-xl-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><code>.align-content-xxl-around</code>:</p>
<div class="d-flex flex-wrap align-content-xxl-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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例21：
<!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">
<h2>拉伸对齐项目</h2>
<p>使用 .align-content-*-stretch 类在不同屏幕上拉伸单行弹性项目。</p>
<p><code>.align-content-stretch</code>:</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>
<p><code>.align-content-sm-stretch</code>:</p>
<div class="d-flex flex-wrap align-content-sm-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>
<p><code>.align-content-md-stretch</code>:</p>
<div class="d-flex flex-wrap align-content-md-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>
<p><code>.align-content-lg-stretch</code>:</p>
<div class="d-flex flex-wrap align-content-lg-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>
<p><code>.align-content-xl-stretch</code>:</p>
<div class="d-flex flex-wrap align-content-xl-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>
<p><code>.align-content-xxl-stretch</code>:</p>
<div class="d-flex flex-wrap align-content-xxl-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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例22：
<!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">
<h2>从开头对齐项目</h2>
<p>使用 .align-items-*-start 类在不同屏幕上从开头对齐单行项目。</p>
<p>请调整浏览器窗口大小来查看效果。<b>Note:</b>align-items-stretch 是默认的。</p>
<p><code>.align-items-start</code>:</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><code>.align-items-sm-start</code>:</p>
<div class="d-flex align-items-sm-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><code>.align-items-md-start</code>:</p>
<div class="d-flex align-items-md-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><code>.align-items-lg-start</code>:</p>
<div class="d-flex align-items-lg-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><code>.align-items-xl-start</code>:</p>
<div class="d-flex align-items-xl-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><code>.align-items-xxl-start</code>:</p>
<div class="d-flex align-items-xxl-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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例23：
<!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">
<h2>在末尾对齐项目</h2>
<p>使用 .align-items-*-end 类在不同屏幕上在末尾对齐单行项目。</p>
<p>请调整浏览器窗口大小来查看效果。<b>Note:</b>align-items-stretch 是默认的。</p>
<p><code>.align-items-end</code>:</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><code>.align-items-sm-end</code>:</p>
<div class="d-flex align-items-sm-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><code>.align-items-md-end</code>:</p>
<div class="d-flex align-items-md-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><code>.align-items-lg-end</code>:</p>
<div class="d-flex align-items-lg-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><code>.align-items-xl-end</code>:</p>
<div class="d-flex align-items-xl-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><code>.align-items-xxl-end</code>:</p>
<div class="d-flex align-items-xxl-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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例24：
<!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">
<h2>居中对齐项目</h2>
<p>使用 .align-items-*-center 类在不同屏幕上的 flex 容器的中心对齐单行项目。</p>
<p>请调整浏览器窗口大小来查看效果。<b>Note:</b>align-items-stretch 是默认的。</p>
<p><code>.align-items-center</code>:</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><code>.align-items-sm-center</code>:</p>
<div class="d-flex align-items-sm-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><code>.align-items-md-center</code>:</p>
<div class="d-flex align-items-md-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><code>.align-items-lg-center</code>:</p>
<div class="d-flex align-items-lg-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><code>.align-items-xl-center</code>:</p>
<div class="d-flex align-items-xl-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><code>.align-items-xxl-center</code>:</p>
<div class="d-flex align-items-xxl-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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例25：
<!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">
<h2>对齐项目基线</h2>
<p>使用 .align-items-*-baseline 类在不同屏幕的基线上对齐单行项目。</p>
<p>请调整浏览器窗口大小来查看效果。<b>Note:</b>align-items-stretch 是默认的。</p>
<p><code>.align-items-baseline</code>:</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><code>.align-items-sm-baseline</code>:</p>
<div class="d-flex align-items-sm-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><code>.align-items-md-baseline</code>:</p>
<div class="d-flex align-items-md-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><code>.align-items-lg-baseline</code>:</p>
<div class="d-flex align-items-lg-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><code>.align-items-xl-baseline</code>:</p>
<div class="d-flex align-items-xl-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><code>.align-items-xxl-baseline</code>:</p>
<div class="d-flex align-items-xxl-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>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例26：
<!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">
<h2>拉伸对齐项目（默认）</h2>
<p>使用 .align-items-*-stretch 类在不同屏幕上拉伸单行项目。</p>
<p><code>.align-items-stretch</code>:</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>
<br>
<p><code>.align-items-sm-stretch</code>:</p>
<div class="d-flex align-items-sm-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>
<br>
<p><code>.align-items-md-stretch</code>:</p>
<div class="d-flex align-items-md-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>
<br>
<p><code>.align-items-lg-stretch</code>:</p>
<div class="d-flex align-items-lg-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>
<br>
<p><code>.align-items-xl-stretch</code>:</p>
<div class="d-flex align-items-xl-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>
<br>
<p><code>.align-items-xxl-stretch</code>:</p>
<div class="d-flex align-items-xxl-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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例27：
<!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">
<h2>从开头对齐自身</h2>
<p>使用 .align-self-*-start 类在不同屏幕上的 flex 容器中从头开始对齐 flex 项。</p>
<p>请调整浏览器窗口大小来查看效果。<b>Note:</b>align-self-stretch 是默认的。</p>
<p><code>.align-self-start</code>:</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><code>.align-self-sm-start</code>:</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-sm-start">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p><code>.align-self-md-start</code>:</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-md-start">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p><code>.align-self-lg-start</code>:</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-lg-start">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p><code>.align-self-xl-start</code>:</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-xl-start">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<br>
<p><code>.align-self-xxl-start</code>:</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-xxl-start">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例28：
<!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">
<h2>在末尾对齐自身</h2>
<p>使用 .align-self-*-end 类在不同屏幕上的 flex 容器中在末尾对齐 flex 项目。</p>
<p>请调整浏览器窗口大小来查看效果。<b>注释：</b>align-self-stretch 是默认的。</p>
<p><code>.align-self-end</code>:</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><code>.align-self-sm-end</code>:</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-sm-end">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p><code>.align-self-md-end</code>:</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-md-end">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p><code>.align-self-lg-end</code>:</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-lg-end">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p><code>.align-self-xl-end</code>:</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-xl-end">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<br>
<p><code>.align-self-xxl-end</code>:</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-xxl-end">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例29：
<!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">
<h2>居中对齐自身</h2>
<p>使用 .align-self-*-center 类在不同屏幕上的 flex 容器的中心对齐 flex 项目。</p>
<p>请调整浏览器窗口大小来查看效果。<b>注释：</b>align-self-stretch 是默认的。</p>
<p><code>.align-self-center</code>:</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><code>.align-self-sm-center</code>:</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-sm-center">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p><code>.align-self-md-center</code>:</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-md-center">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p><code>.align-self-lg-center</code>:</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-lg-center">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p><code>.align-self-xl-center</code>:</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-xl-center">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<br>
<p><code>.align-self-xxl-center</code>:</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-xxl-center">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例30：
<!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">
<h2>对齐自身基线</h2>
<p>使用 .align-self-*-baseline 类在不同屏幕上的 flex 容器中在基线上对齐 flex 项。</p>
<p>请调整浏览器窗口大小来查看效果。<b>注释：</b>align-self-stretch 是默认的。</p>
<p><code>.align-self-baseline</code>:</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><code>.align-self-sm-baseline</code>:</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-sm-baseline">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p><code>.align-self-md-baseline</code>:</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-md-baseline">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p><code>.align-self-lg-baseline</code>:</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-lg-baseline">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p><code>.align-self-xl-baseline</code>:</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-xl-baseline">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<br>
<p><code>.align-self-xxl-baseline</code>:</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-xxl-baseline">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例31：
<!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">
<h2>对齐拉伸自身（默认）</h2>
<p>使用 .align-self-*-stretch 类在不同屏幕上的 flex 容器中拉伸 flex 项目。</p>
<p><code>.align-self-stretch</code>:</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>
<p><code>.align-self-sm-stretch</code>:</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-sm-stretch">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p><code>.align-self-md-stretch</code>:</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-md-stretch">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p><code>.align-self-lg-stretch</code>:</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-lg-stretch">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p><code>.align-self-xl-stretch</code>:</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-xl-stretch">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<br>
<p><code>.align-self-xxl-stretch</code>:</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-xxl-stretch">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
