弹性盒子
.flexbox类是什么？
Flexbox（Flexible Box）是 CSS3 中引入的一种布局模型，用于设计复杂的页面布局并实现灵活的排列方式。Flexbox 的目标是提供一种更加高效和强大的布局方式，使开发者能够轻松地控制元素在容器内的排列、对齐、分布和尺寸调整。
一、.d-flex和.d-inline-flex
1、.d-flex类。 将元素设置为块级 Flex 容器，使其内部元素采用 Flex 布局，将元素及其子元素排列为 Flexbox 布局，主要用于创建块级的弹性盒子布局。
使用案例：
以下是一个简单的示例，演示如何使用 .d-flex 类将一个 元素设置为 Flex 容器。
<!--使用d-flex类创建弹性盒子-->
<div class="d-flex p-3 bg-warning text-white">
<div class="p-2 bg-primary">d-flex item 1</div>
<div class="p-2 bg-success">d-flex item 2</div>
<div class="p-2 bg-danger">d-flex item3</div>
</div>
在这个案例中，div 将内部的元素排列为 Flexbox 布局，实现灵活的排列和对齐。
2、.d-inline-flex。 将元素设置为行内块 Flex 容器，使其内部元素采用 Flex 布局。将元素及其子元素排列为行内块级的 Flexbox 布局，适用于在行内元素中创建弹性盒子布局。
使用案例：
以下是一个示例，展示如何使用 .d-inline-flex 类将一个 div元素设置为行内块 Flex 容器：
<!--使用d-inline-flex类创建弹性盒子-->
<div class="d-inline-flex p-3 bg-warning text-white">
<div class="p-2 bg-primary">d-inline-flex item 1</div>
<div class="p-2 bg-success">d-inline-flex item 2</div>
<div class="p-2 bg-danger">d-inline-flex item3</div>
</div>
在这个案例中，将内部的 div>元素排列为行内块级的 Flexbox 布局，使其在文本流中按照 Flexbox 规则排列。
总结：
通过使用 .d-flex 和 .d-inline-flex 类，开发者可以方便地将元素转换为 Flex 容器，并利用 Flexbox 的强大功能来实现更灵活的布局设计。这些类结合其他 Flexbox 类，如对齐、排列和伸缩等类，可以帮助开发者轻松创建各种布局效果，实现响应式和灵活的页面设计。在 Bootstrap 中，这些类被广泛应用于构建现代化的网页布局，提供了便捷的工具来实现灵活而美观的页面结构。
二、.flex-row和.flex-column
.flex-row 和 .flex-column 是 Bootstrap 中用于设置 Flex 容器主轴方向的类，分别用于将元素的主轴方向设置为水平行（row）和垂直列（column）。下面详细解释它们的定义及相关使用案例。
1、.flex-row 。 将 Flex 容器的主轴方向设置为水平行，使内部项目水平排列。
使用案例：
以下是一个简单示例，展示如何使用 .flex-row 类将一个div元素设置为 Flex 容器，并使其内部项目水平排列：
<div class="container">
<h3 class="mb-4">水平方向</h3>
<h4>flex-row(从左侧开始)</h4>
<div class="d-flex flex-row p-3 bg-warning text-white">
<div class="p-2 bg-primary">d-flex item 1</div>
<div class="p-2 bg-success">d-flex item 2</div>
<div class="p-2 bg-danger">d-flex item3</div>
</div>
<br>
<h4>flex-row-reverse(从右侧开始)</h4>
<div class="d-flex flex-row-reverse p-3 bg-warning text-white">
<div class="p-2 bg-primary">d-flex item 1</div>
<div class="p-2 bg-success">d-flex item 2</div>
<div class="p-2 bg-danger">d-flex item3</div>
</div>
</div>
在这个案例中，div class=“d-flex flex-row” 将内部的 div元素以水平行的方式排列，实现水平方向的布局。
2、.flex-column。 将 Flex 容器的主轴方向设置为垂直列，使内部项目垂直排列。
使用案例：
以下是一个示例，展示如何使用 .flex-column 类将一个
<div class="container">
<h3 class="mb-4">垂直方向</h3>
<h4>flex-column(从上往下)</h4>
<div class="d-flex flex-column p-3 bg-warning text-white">
<div class="p-2 bg-primary">d-flex item 1</div>
<div class="p-2 bg-success">d-flex item 2</div>
<div class="p-2 bg-danger">d-flex item3</div>
</div>
<br>
<h4>flex-column-reverse(从下往上)</h4>
<div class="d-flex flex-column-reverse p-3 bg-warning text-white">
<div class="p-2 bg-primary">d-flex item 1</div>
<div class="p-2 bg-success">d-flex item 2</div>
<div class="p-2 bg-danger">d-flex item3</div>
</div>
</div>
在这个案例中，div class="d-flex flex-column"内部的 div元素以垂直列的方式排列，实现垂直方向的布局。
总结： 通过使用 .flex-row 和 .flex-column 类，开发者可以灵活地控制 Flex 容器的主轴方向，从而实现水平或垂直排列的布局效果。这些类结合其他 Flexbox 类，如对齐、排列和伸缩等类，可以帮助开发者快速创建各种灵活的页面结构。在 Bootstrap 中，这些类被广泛应用于构建响应式和现代化的网页布局，为开发者提供了便捷的工具来设计出各种灵活而美观的页面布局。
三、.justify-content-*
.justify-content-* 是 Flexbox 布局中用于控制 Flex 容器主轴上对齐方式的类，包括了多种不同的取值，如 start、end、center、between、around 等。下面详细解释它们的定义及相关使用案例。
1、.justify-content-start: 将 Flex 容器内的 Flex 项目沿主轴起始端对齐。
使用案例：
以下是一个示例，展示如何使用 .justify-content-start 类将 Flex 容器内的项目在主轴上对齐到起始端：
<div class="d-flex justify-content-start mb-3 bg-warning text-white">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
2、.justify-content-end: 将 Flex 容器内的 Flex 项目沿主轴末尾端对齐。
使用案例：
以下是一个示例，展示如何使用 .justify-content-end 类将 Flex 容器内的项目在主轴上对齐到末尾端：
<!--justify-content-end-->
<div class="d-flex justify-content-end mb-3 bg-warning text-white">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
3、.justify-content-center。 将 Flex 容器内的 Flex 项目沿主轴居中对齐。
使用案例： 以下是一个示例，展示如何使用 .justify-content-center 类将 Flex 容器内的项目在主轴上居中对齐：
<!--justify-content-center-->
<div class="d-flex justify-content-center mb-3 bg-warning text-white">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
4、.justify-content-between: 使 Flex 容器内的项目在主轴上等间距分布，首尾项目与容器边缘对齐。
使用案例：
以下是一个示例，展示如何使用 .justify-content-between 类将 Flex 容器内的项目在主轴上等间距分布：
<!--justify-content-between-->
<div class="d-flex justify-content-between mb-3 bg-warning text-white">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
5、.justify-content-around: 使 Flex 容器内的项目在主轴上等间距分布，且项目周围留有相等的空白间隔。
<!--justify-content-around-->
<div class="d-flex justify-content-around mb-3 bg-warning text-white">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
运行截图如下：
总结： 通过使用不同取值的 .justify-content-* 类，开发者可以灵活地控制 Flex 容器内项目在主轴上的对齐方式，实现各种布局效果。这些类结合其他 Flexbox 类，如主轴方向、交叉轴对齐等类，可以帮助开发者轻松创建多样化的页面布局，满足不同设计需求。在实际开发中，.justify-content-* 类在 Bootstrap 中被广泛应用，为开发者提供了便捷的工具来控制 Flexbox 布局中项目的对齐方式，实现灵活而优雅的页面设计。
四、.align-items-和.align-self-
1、align-items-* 通过不同的取值，可以控制 Flex 容器内所有项目在交叉轴上的对齐方式，实现垂直方向的布局控制。
常用取值：
start：项目向交叉轴起始端对齐。
end：项目向交叉轴末尾端对齐。
center：项目在交叉轴上居中对齐。
baseline：项目以其基线对齐。
stretch：项目沿交叉轴拉伸以填充整个容器的高度。
使用案例：以下是一个示例，展示如何使用 .align-items-*类将 Flex 容器内的所有项目在交叉轴上垂直居中对齐：
<div class="container">
<h3 class="mb-4">项目对齐</h3>
<div class="d-flex align-items-start mb-3 bg-warning text-white box">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
<div class="d-flex align-items-end mb-3 bg-warning text-white box">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
<div class="d-flex align-items-center mb-3 bg-warning text-white box">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
<div class="d-flex align-items-baseline mb-3 bg-warning text-white box">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
<div class="d-flex align-items-stretch mb-3 bg-warning text-white box">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
</div>
2、.align-self-* 是 Bootstrap 中用于设置 Flex 容器内单个项目在交叉轴（垂直轴）上对齐方式的类。通过 .align-self-* 类，可以单独控制某个项目在交叉轴上的对齐方式，不受其他项目的影响。下面对 .align-self-* 的定义进行详细解释，并提供相关的使用案例。
常用取值：
start：项目向交叉轴起始端对齐。
end：项目向交叉轴末尾端对齐。
center：项目在交叉轴上居中对齐。
baseline：项目以其基线对齐。
stretch：项目沿交叉轴拉伸以填充整个容器的高度。
使用案例： 以下是一个示例，展示如何使用 .align-self-* 类将 Flex 容器内的某个项目在交叉轴上对齐。
<body class="container">
<h3 class="mb-4">指定项目对齐</h3>
<div class="d-flex mb-3 bg-warning text-white box">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success align-self-start">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
<div class="d-flex mb-3 bg-warning text-white box">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success align-self-center">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
<div class="d-flex mb-3 bg-warning text-white box">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success align-self-end">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
<div class="d-flex mb-3 bg-warning text-white box">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success align-self-baseline">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
<div class="d-flex mb-3 bg-warning text-white box">
<div class="p-2 bg-primary">Flex项目1</div>
<div class="p-2 bg-success align-self-stretch">Flex项目2</div>
<div class="p-2 bg-danger">Flex项目3</div>
</div>
</body>
五、flex-grow-*、.flex-shrink-以及.flex-basis-
.flex-grow-、.flex-shrink- 和 .flex-basis-* 是 Bootstrap 中用于控制 Flex 项目在 Flex 容器中尺寸分配的类，它们通常与 Flexbox 布局一起使用。下面详细解释它们的定义及相关使用案例。
1、.flex-grow-*:
定义： .flex-grow-* 类用于设置 Flex 项目在可分配空间中增长的比例。
功能： 指定了 Flex 项目在主轴上增长的比例。比如，如果有多个项目具有不同的 flex-grow 值，它们会根据比例分配剩余空间。
使用案例： 以下是一个示例，展示如何使用 .flex-grow-* 类设置 Flex 项目在主轴上的增长：
<div class="d-flex">
<div class="flex-grow-1">项目1</div>
<div class="flex-grow-2">项目2</div>
<div class="flex-grow-1">项目3</div>
</div>
在这个案例中，设置了不同的 .flex-grow-* 类来控制每个项目在主轴上的增长比例，项目2 的宽度将是 项目1 和 项目3 的两倍。
2.flex-shrink-*:
定义： .flex-shrink-* 类用于设置 Flex 项目在必要时缩小的比例。
功能： 指定了 Flex 项目在主轴上缩小的比例。如果 Flex 容器空间不足，项目将按照设置的比例缩小。
使用案例： 以下是一个示例，展示如何使用 .flex-shrink-* 类设置 Flex 项目在必要时缩小的比例：
<div class="d-flex">
<div class="flex-shrink-1">项目A</div>
<div class="flex-shrink-2">项目B</div>
<div class="flex-shrink-1">项目C</div>
</div>
在这个案例中，设置了不同的 .flex-shrink-* 类来控制每个项目在主轴上的缩小比例，当 Flex 容器空间不足时，项目B 的宽度将会缩小得更多。
3、.flex-basis-*:
定义：.flex-basis-* 类用于设置 Flex 项目在没有设置宽度的情况下的初始尺寸。
功能： 指定了 Flex 项目在主轴上的初始尺寸。如果没有设置宽度，项目将根据初始尺寸进行布局。
使用案例： 以下是一个示例，展示如何使用 .flex-basis-* 类设置 Flex 项目的初始尺寸：
<div class="d-flex">
<div class="flex-basis-50">项目X</div>
<div class="flex-basis-100">项目Y</div>
<div class="flex-basis-75">项目Z</div>
</div>
在这个案例中，设置了不同的 .flex-basis-* 类来指定每个项目在主轴上的初始尺寸，项目Y 的初始尺寸将会是 项目X 的两倍。
通过使用 .flex-grow-、.flex-shrink- 和 .flex-basis-* 类，可以更精细地控制 Flex 项目在 Flex 容器中的尺寸调整和分配，实现灵活的布局效果。这些类结合其他 Flexbox 类，如对齐方式等，可以帮助开发者构建出符合设计需求的响应式布局。在 Bootstrap 中，这些类被广泛应用于创建灵活且现代化的网页布局，为开发者提供了强大的工具来控制 Flexbox 布局中项目的尺寸分配。
六、兄弟元素自动平分剩余的空间
.flex-fill 是 Bootstrap 中用于使 Flex 项目充满剩余空间的类。当应用 .flex-fill 类时，Flex 项目会占据Flex容器中剩余的空间，让它填充可用空间。下面详细解释 .flex-fill 的定义及相关使用案例：
.flex-fill:
定义：.flex-fill 类用于使 Flex 项目充满剩余空间，填充 Flex 容器中未被占用的空间。
功能： 当应用 .flex-fill 类时，Flex 项目会自动填充 Flex 容器中剩余的空间，使项目充满可用空间。
**使用案例： **以下是一个示例，展示如何使用 .flex-fill 类让 Flex 项目充满剩余空间：
<h3 class="mb-4">平均分配剩下的空间</h3>
<div class="d-flex mb-3 bg-warning text-white box">
<div class="flex-fill p-2 bg-primary">Flex item1(包含大量内容)</div>
<div class="p-2 bg-success flex-fill">Flex item 2</div>
<div class="p-2 bg-danger flex-fill">Flex item 3</div>
</div>
通过使用 .flex-fill 类，开发者可以轻松地让 Flex 项目占据剩余空间，实现灵活的布局效果。这个类通常与其他 Flexbox 类使用，如 .d-flex（定义 Flex 容器）和其他对齐类一起，帮助开发者构建出自适应且现代化的页面布局。在 Bootstrap 中，.flex-fill 类被广泛应用于创建自动填充剩余空间的 Flex 项目，为开发者提供了方便的工具来实现灵活且美观的页面设计。
七、盒子水平方向和垂直方向浮动变化
1、水平方向。
<div class="container">
<h3 class="mb-4">水平方向</h3>
<div class="d-flex mb-3 bg-warning text-white">
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-success">Flex item</div>
<div class="p-2 bg-danger">Flex item</div>
</div>
<div class="d-flex mb-3 bg-warning text-white">
<div class="p-2 mr-auto bg-primary">Flex item</div>
<div class="p-2 bg-success">Flex item</div>
<div class="p-2 bg-danger">Flex item</div>
</div>
<div class="d-flex mb-3 bg-warning text-white">
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-success">Flex item</div>
<div class="p-2 ml-auto bg-danger">Flex item</div>
</div>
</div>
2、垂直方向。
<h3 class="mb-4">垂直方向</h3>
<div class="d-flex mb-3 bg-warning text-white align-items-start flex-column" style="height: 200px">
<div class="mb-auto p-2 bg-primary">Flex item</div>
<div class="p-2 bg-success">Flex item</div>
<div class="p-2 bg-danger">Flex item</div>
</div>
<div class="d-flex mb-3 bg-warning text-white align-items-end flex-column" style="height: 200px">
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-success">Flex item</div>
<div class="mt-auto p-2 bg-danger">Flex item</div>
</div>
八、.flex-wrap的应用
flex-wrap 是 Bootstrap 中用于控制 Flex 容器中 Flex 项目是否换行的类。通过应用 .flex-wrap 类，可以指定 Flex 项目在 Flex 容器中是否允许换行。下面详细解释 .flex-wrap 的定义及相关使用案例：
.flex-wrap:
定义：.flex-wrap 类用于设置 Flex 容器中 Flex 项目是否允许换行。
功能： 指定 Flex 容器中的 Flex 项目是否允许在需要时换行，以适应容器的宽度。
常用取值：
flex-wrap：允许项目在必要时换行。
flex-nowrap：项目不换行，会尝试在一行内显示。
flex-wrap-reverse：允许项目在必要时换行，但是从反向方向开始排列。
使用案例： 以下是一个示例，展示如何使用 .flex-wrap 类控制 Flex 容器中 Flex 项目的换行：
<div class="d-flex bg-warning text-white mb-4 flex-wrap flex-wrap-reverse">
<div class="p-2 bg-primary">Flex 项目1</div>
<div class="p-2 bg-success">Flex 项目2</div>
<div class="p-2 bg-danger">Flex 项目3</div>
<div class="p-2 bg-primary">Flex 项目4</div>
<div class="p-2 bg-success">Flex 项目5</div>
<div class="p-2 bg-danger">Flex 项目6</div>
</div>
<div class="d-flex bg-warning text-white mb-4">
<div class="p-2 bg-primary">Flex 项目1</div>
<div class="p-2 bg-success">Flex 项目2</div>
<div class="p-2 bg-danger">Flex 项目3</div>
<div class="p-2 bg-primary">Flex 项目4</div>
<div class="p-2 bg-success">Flex 项目5</div>
<div class="p-2 bg-danger">Flex 项目6</div>
</div>
在这个案例中，应用了 .flex-wrap 类，Flex 容器中的 Flex 项目会在需要时自动换行，以适应容器的宽度。
总结： 通过使用 .flex-wrap 类，开发者可以控制 Flex 容器中 Flex 项目的换行方式，使布局更加灵活和响应式。这个类通常与其他 Flexbox 类一起使用，如对齐类、尺寸类等，帮助开发者实现各种复杂的布局设计。在 Bootstrap 中，.flex-wrap 类被广泛应用于创建支持自动换行的 Flex 布局，为开发者提供了方便的工具来实现多样化且适应性强的页面布局。
2463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
