二、Bootstrap之FlexBox弹性盒子

.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 类将一个

元素设置为 Flex 容器，并使其内部项目垂直排列。

<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 <