目录
Flex(弹性)布局
弹性盒子(flexbox)
水平方向
垂直方向
对齐内容
等宽
伸展
顺序
自动外边距
包裹
对齐内容
子元素对齐
指定子元素对齐
响应式 Flex 类
Flex(弹性)布局
弹性盒子(flexbox)
Bootstrap 3 和 Bootstrap 4 & 5 的最大区别在于 Bootstrap 5 现在使用 flexbox 而不是浮动来处理布局。
弹性的框布局模块,可以更轻松地设计弹性响应式布局结构,而无需使用浮动或定位。
注意:IE9 及更早版本不支持 Flexbox。如果需要 IE8-9 支持,请使用 Bootstrap 3。它是最稳定的 Bootstrap 版本,团队仍然支持它进行关键错误修复和文档更改。但是不会向其中添加任何新功能。
在 Bootstrap 5 中,d-flex 类表示使用 Flexbox 布局的容器类。它可以将直接子项转换为 flex 项,并且具有许多其他的可选项。同时,Bootstrap 5 也提供了一个用于创建行内 Flexbox 容器的类,即 d-inline-flex 类。
与 d-flex 类相似,d-inline-flex 类可以将直接子项转换为 flex 项,并且具有与 d-flex 类相同的可选项。但是,它使用行内布局方式而不是块级布局方式。这意味着,在使用 d-inline-flex 类创建行内 Flexbox 容器时,容器和其中的 flex 项都将以行内元素的方式呈现。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<p>使用 d-flex 类创建一个弹性盒子容器,并设置三个弹性子元素:</p>
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">弹性项目 1</div>
<div class="p-2 bg-warning">弹性项目 2</div>
<div class="p-2 bg-primary">弹性项目 3</div>
</div><br />
<p>创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类:</p>
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">弹性项目 1</div>
<div class="p-2 bg-warning">弹性项目 2</div>
<div class="p-2 bg-primary">弹性项目 3</div>
</div>
</div>
</body>
</html>
总的来说,Bootstrap 5 的引入弹性框布局是一个非常不错的改变,它使得布局的设计更加方便灵活,可以更好地应对不同尺寸设备的要求。
水平方向
在 Bootstrap 5 中使用.flex-row类可以将弹性子元素水平显示,默认情况下是从左到右水平排列的。
此外,Bootstrap 5 还提供了 .flex-row-reverse 类,用于将弹性子元素以右对齐的方式显示,即与 .flex-row 方向相反。通过添加 .flex-row-reverse 类,弹性子元素将从右到左水平排列。
例如,下面的代码示例展示了如何使用 .flex-row 和 .flex-row-reverse 类来设置弹性子元素的水平显示方向:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="d-flex flex-row bg-secondary">
<div class="p-2 bg-info">弹性项目 1</div>
<div class="p-2 bg-warning">弹性项目 2</div>
<div class="p-2 bg-primary">弹性项目 3</div>
</div><br />
<div class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">弹性项目 1</div>
<div class="p-2 bg-warning">弹性项目 2</div>
<div class="p-2 bg-primary">弹性项目 3</div>
</div>
</div>
</body>
</html>
在第一个示例中,弹性子元素将从左到右水平显示。在第二个示例中,弹性子元素将从右到左水平显示。
垂直方向
在 Bootstrap 5 中使用 .flex-column 类可以将弹性子元素垂直显示,默认情况下是从上到下垂直排列的。
除了 .flex-column 外,Bootstrap 5 还提供了 .flex-column-reverse 类,用于将弹性子元素以反向的垂直方式显示,即与 .flex-column 方向相反。通过添加 .flex-column-reverse 类,弹性子元素将从下到上垂直排列。
例如,下面的代码示例展示了如何使用 .flex-column 和 .flex-column-reverse 类来设置弹性子元素的垂直显示方向:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="d-flex flex-column">
<div class="p-2 bg-info">弹性项目 1</div>
<div class="p-2 bg-warning">弹性项目 2</div>
<div class="p-2 bg-primary">弹性项目 3</div>
</div>
<br />
<div class="d-flex flex-column-reverse">
<div class="p-2 bg-info">弹性项目 1</div>
<div class="p-2 bg-warning">弹性项目 2</div>
<div class="p-2 bg-primary">弹性项目 3</div>
</div>
</div>
</body>
</html>
在第一个示例中,弹性子元素将从上到下垂直显示。在第二个示例中,弹性子元素将从下到上垂直显示。
对齐内容
在 Bootstrap 5 中可以使用.justify-content-*类来改变弹性项目的对齐方式。
以下是可用的.justify-content-*类及其作用:
- .justify-content-start:将弹性项目左对齐(默认值)。
- .justify-content-end:将弹性项目右对齐。
- .justify-content-center:将弹性项目居中对齐。
- .justify-content-between:将弹性项目平均分布在容器内,左右两端没有间距。
- .justify-content-around:将弹性项目平均分布在容器内,左右两端有相等的间距。
您可以根据需要选择适当的.justify-content-*类来实现所需的对齐效果。
例如,下面的代码示例展示了如何使用不同的.justify-content-*类来改变弹性项目的对齐方式:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="d-flex justify-content-start bg-secondary mb-3">
<div class="p-2 bg-info">弹性项目 1</div>
<div class="p-2 bg-warning">弹性项目 2</div>
<div class="p-2 bg-primary">弹性项目 3</div>
</div>
<div class="d-flex justify-content-end bg-secondary mb-3">
<div class="p-2 bg-info">弹性项目 1</div>
<div class="p-2 bg-warning">弹性项目 2</div>
<div class="p-2 bg-primary">弹性项目 3</div>
</div>
<div class="d-flex justify-content-center bg-secondary mb-3">
<div class="p-2 bg-info">弹性项目 1</div>
<div class="p-2 bg-warning">弹性项目 2</div>
<div class="p-2 bg-primary">弹性项目 3</div>
</div>
<div class="d-flex justify-content-between bg-secondary mb-3">
<div class="p-2 bg-info">弹性项目 1</div>
<div class="p-2 bg-warning">弹性项目 2</div>
<div class="p-2 bg-primary">弹性项目 3</div>
</div>
<div class="d-flex justify-content-around bg-secondary mb-3">
<div class="p-2 bg-info">弹性项目 1</div>
<div class="p-2 bg-warning">弹性项目 2</div>
<div class="p-2 bg-primary">弹性项目 3</div>
</div>
</div>
</body>
</html>
等宽
在 Flex 项目上使用.flex-fill类可以强制它们等宽。
.flex-fill类用于填充剩余的可用空间,并让 Flex 项目等宽。这意味着所有的 Flex 项目将以相同的宽度显示,无论它们的内容有多长。
以下是如何使用.flex-fill类来使 Flex 项目等宽的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="d-flex">
<div class="p-2 bg-info flex-fill">弹性项目 1</div>
<div class="p-2 bg-warning flex-fill">弹性项目 2</div>
<div class="p-2 bg-primary flex-fill">弹性项目 3</div>
</div>
</div>
</body>
</html>
在上述示例中,三个 Flex 项目都使用了.flex-fill类,它们将平均分配可用的空间,并呈现等宽。
伸展
在 Flex 项目上使用.flex-grow-1类可以使其占用多余的空间。
.flex-grow-*类用于控制 Flex 项目在可用空间超过它们所需的空间时的扩展性。当设置为.flex-grow-1时,Flex 项目将占用剩余的空间,并填充可用的空间。如果有多个.flex-grow-1的 Flex 项目,则它们将平均分配剩余的空间。
提示:在 flex 项目上使用 .flex-shrink-1 可使其在必要时收缩。
以下是如何使用.flex-grow-1类来占用多余空间的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="d-flex">
<div class="p-2 bg-info">弹性项目 1</div>
<div class="p-2 bg-warning">弹性项目 2</div>
<div class="p-2 bg-primary flex-grow-1">弹性项目 3</div>
</div>
</div>
</body>
</html>
在上述示例中,前两个 Flex 项目没有使用.flex-grow-1类,它们仅占用其所需的空间。然而,第三个 Flex 项目使用了.flex-grow-1类,因此它将占用剩余的空间,并填充可用的空间。
顺序
使用.order类可以更改特定 Flex 项目的视觉顺序。
.order-*类用于控制 Flex 项目的顺序。从 .order-1 到 .order-12,数字越小,优先级越高,即数字越小的.order-*类将在数字较大的.order-*类之前显示。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="d-flex bg-secondary">
<div class="p-2 bg-info order-3">弹性项目 1</div>
<div class="p-2 bg-warning order-2">弹性项目 2</div>
<div class="p-2 bg-primary order-1">弹性项目 3</div>
</div>
</div>
</body>
</html>
在上述示例中,通过.order-*类,我们可以改变 Flex 项目的显示顺序。弹性项目 1被设置为order-2,弹性项目 2被设置为order-1,弹性项目 3被设置为order-3。这样,弹性项目 2将显示在弹性项目 1的前面,而弹性项目 3将显示在最后。
自动外边距
使用.ms-auto和.me-auto类可以为弹性项目添加自动外边距。
.ms-auto和.me-auto类用于在弹性容器中将项目向右或向左推,以实现自动外边距的效果。它们分别表示"margin-start:auto"和"margin-end:auto"。
以下是如何使用.ms-auto和.me-auto类为弹性项目添加自动外边距的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="d-flex bg-secondary">
<div class="p-2 ms-auto bg-info">弹性项目 1</div>
<div class="p-2 bg-warning">弹性项目 2</div>
<div class="p-2 bg-primary">弹性项目 3</div>
</div>
<br />
<div class="d-flex bg-secondary">
<div class="p-2 bg-info">弹性项目 1</div>
<div class="p-2 bg-warning">弹性项目 2</div>
<div class="p-2 me-auto bg-primary">弹性项目 3</div>
</div>
</div>
</body>
</html>
包裹
使用.flex-nowrap、.flex-wrap和.flex-wrap-reverse类可以控制弹性容器中子元素的包裹方式。
这三个类用于设置弹性容器中子元素的包裹方式:
- .flex-nowrap是默认值,它表示所有子元素将放在一行上,不会自动换行。
- .flex-wrap表示子元素将被包裹成多行。如果需要,子元素将向下自动换行,并尽可能占满所有可用的垂直空间。
- .flex-wrap-reverse与.flex-wrap类似,但是子元素是从右往左堆叠,而不是从左往右。
以下是如何使用.flex-nowrap、.flex-wrap和.flex-wrap-reverse类来设置弹性容器中子元素的包裹方式的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<p><code>.flex-wrap:</code></p>
<div class="d-flex flex-wrap bg-light">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p><code>.flex-wrap-reverse:</code></p>
<div class="d-flex flex-wrap-reverse bg-light">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p><code>.flex-nowrap:</code></p>
<div class="d-flex flex-nowrap bg-light">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
<div class="p-2 border">Flex item 26</div>
<div class="p-2 border">Flex item 27</div>
<div class="p-2 border">Flex item 28</div>
<div class="p-2 border">Flex item 29</div>
<div class="p-2 border">Flex item 30</div>
<div class="p-2 border">Flex item 31</div>
<div class="p-2 border">Flex item 32</div>
<div class="p-2 border">Flex item 33</div>
<div class="p-2 border">Flex item 34</div>
<div class="p-2 border">Flex item 35</div>
</div>
<br>
</div>
</body>
</html>
对齐内容
使用.align-content-*类可以控制弹性项目的垂直对齐方式。
这些类用于设置弹性容器中多行弹性项目的垂直对齐方式。以下是可用的类及其效果:
- .align-content-start(默认):将弹性项目垂直对齐到容器的顶部。
- .align-content-end:将弹性项目垂直对齐到容器的底部。
- .align-content-center:将弹性项目垂直居中对齐。
- .align-content-between:将第一个弹性项目对齐到容器的顶部,将最后一个弹性项目对齐到容器的底部,并将剩余的弹性项目平均分布在中间。
- .align-content-around:将弹性项目平均分布在容器内,两侧留有相等的空白。
- .align-content-stretch:将弹性项目拉伸以填充整个容器的高度。
请注意,这些类只对具有多行弹性项目的容器生效,对于单行弹性项目没有影响。您可以根据需要选择合适的类来对齐弹性项目的垂直位置。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<p>.align-content-start (默认):</p>
<div class="d-flex flex-wrap align-content-start bg-light" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p>.align-content-end:</p>
<div class="d-flex flex-wrap align-content-end bg-light" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p>.align-content-center:</p>
<div class="d-flex flex-wrap align-content-center bg-light" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p>.align-content-around:</p>
<div class="d-flex flex-wrap align-content-around bg-light" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p>.align-content-stretch:</p>
<div class="d-flex flex-wrap align-content-stretch bg-light" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
</div>
</body>
</html>
子元素对齐
可以使用.align-items-*类来控制单行子元素的对齐方式。
这些类用于设置弹性容器中单行子元素的垂直对齐方式。以下是可用的类及其效果:
- .align-items-start:将子元素垂直对齐到容器的顶部。
- .align-items-end:将子元素垂直对齐到容器的底部。
- .align-items-center:将子元素垂直居中对齐。
- .align-items-baseline:将子元素基线对齐。
- .align-items-stretch(默认):将子元素拉伸以填充整个容器的高度。
请注意,这些类只对具有单行子元素的容器生效,对于多行弹性项目没有影响。您可以根据需要选择合适的类来对齐单行子元素的垂直位置。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<p>.align-items-start:</p>
<div class="d-flex align-items-start bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-items-end:</p>
<div class="d-flex align-items-end bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-items-center:</p>
<div class="d-flex align-items-center bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-items-baseline:</p>
<div class="d-flex align-items-baseline bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-items-stretch (默认):</p>
<div class="d-flex align-items-stretch bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
</div>
</body>
</html>
指定子元素对齐
可以使用.align-self-*类来控制单个子元素的垂直对齐方式。
这些类用于设置弹性容器中单个子元素的垂直对齐方式。以下是可用的类及其效果:
- .align-self-start:将子元素垂直对齐到容器的顶部。
- .align-self-end:将子元素垂直对齐到容器的底部。
- .align-self-center:将子元素垂直居中对齐。
- .align-self-baseline:将子元素基线对齐。
- .align-self-stretch(默认):将子元素拉伸以填充整个容器的高度。
请注意,这些类只对单个子元素生效,而不是整个容器或多个子元素。您可以通过为特定的子元素添加适当的类来控制其垂直对齐方式。文章来源:https://www.toymoban.com/news/detail-736426.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<p>.align-self-start:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-start">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-self-end:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-end">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-self-center:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-center">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-self-baseline:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-baseline">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-self-stretch (默认):</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-stretch">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
</div>
</body>
</html>
响应式 Flex 类
所有弹性类都带有额外的响应类,这使得在特定屏幕尺寸上设置特定 flex 类变得容易。* 符号可以替换为 sm、md、lg、xl 或 xxl,分别代表小、中、大、超大和特大屏幕。文章来源地址https://www.toymoban.com/news/detail-736426.html
类 | 实例 | 实现 |
---|---|---|
弹性容器 | ||
.d-*-flex |
根据不同的屏幕设备创建弹性盒子容器 | 尝试一下 |
.d-*-inline-flex |
根据不同的屏幕设备创建行内弹性盒子容器 | 尝试一下 |
方向 | ||
.flex-*-row |
根据不同的屏幕设备在水平方向显示弹性子元素 | 尝试一下 |
.flex-*-row-reverse |
根据不同的屏幕设备在水平方向显示弹性子元素,且右对齐 | 尝试一下 |
.flex-*-column |
根据不同的屏幕设备在垂直方向显示弹性子元素 | 尝试一下 |
.flex-*-column-reverse |
根据不同的屏幕设备在垂直方向显示弹性子元素,且方向相反 | 尝试一下 |
内容对齐 | ||
.justify-content-*-start |
根据不同屏幕设备在开始位置显示弹性子元素 (左对齐) | 尝试一下 |
.justify-content-*-end |
根据不同屏幕设备在尾部显示弹性子元素 (右对齐) | 尝试一下 |
.justify-content-*-center |
根据不同屏幕设备在 flex 容器中居中显示子元素 | 尝试一下 |
.justify-content-*-between |
根据不同屏幕设备使用 "between" 显示弹性子元素 | 尝试一下 |
.justify-content-*-around |
根据不同屏幕设备使用 "around" 显示弹性子元素 | 尝试一下 |
等宽 | ||
.flex-*-fill |
根据不同的屏幕设备强制等宽 | 尝试一下 |
扩展 | ||
.flex-*-grow-0 |
不同的屏幕设备不设置扩展 | |
.flex-*-grow-1 |
不同的屏幕设备设置扩展 | |
收缩 | ||
.flex-*-shrink-0 |
不同的屏幕设备不设置收缩 | |
.flex-*-shrink-1 |
不同的屏幕设备设置收缩 | |
包裹 | ||
.flex-*-nowrap |
不同的屏幕设备不设置包裹元素 | 尝试一下 |
.flex-*-wrap |
不同的屏幕设备设置包裹元素 | 尝试一下 |
.flex-*-wrap-reverse |
不同的屏幕设备反转包裹元素 | 尝试一下 |
内容排列 | ||
.align-content-*-start |
根据不同屏幕设备在起始位置堆叠元素 | 尝试一下 |
.align-content-*-end |
根据不同屏幕设备在结束位置堆叠元素 | 尝试一下 |
.align-content-*-center |
根据不同屏幕设备在中间位置堆叠元素 | 尝试一下 |
.align-content-*-around |
根据不同屏幕设备,使用 "around" 堆叠元素 | 尝试一下 |
.align-content-*-stretch |
根据不同屏幕设备,通过伸展元素来堆叠 | 尝试一下 |
排序 | ||
.order-*-0-12 |
在小屏幕尺寸上修改排序 | 尝试一下 |
元素对齐 | ||
.align-items-*-start |
根据不同屏幕设备,让元素在头部显示在同一行。 | 尝试一下 |
.align-items-*-end |
根据不同屏幕设备,让元素在尾部显示在同一行。 | 尝试一下 |
.align-items-*-center |
根据不同屏幕设备,让元素在中间位置显示在同一行。 | 尝试一下 |
.align-items-*-baseline |
根据不同屏幕设备,让元素在基线上显示在同一行。 | 尝试一下 |
.align-items-*-stretch |
根据不同屏幕设备,让元素延展高度并显示在同一行。 | 尝试一下 |
单独一个子元素的对齐方式 | ||
.align-self-*-start |
据不同屏幕设备,让单独一个子元素显示在头部。 | 尝试一下 |
.align-self-*-end |
据不同屏幕设备,让单独一个子元素显示在尾部 | 尝试一下 |
.align-self-*-center |
据不同屏幕设备,让单独一个子元素显示在居中位置 | 尝试一下 |
.align-self-*-baseline |
据不同屏幕设备,让单独一个子元素显示在基线位置 | 尝试一下 |
.align-self-*-stretch |
据不同屏幕设备,延展一个单独子元素 | 尝试一下 |
到了这里,关于学习Bootstrap 5的第十六天的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!